IndexedDB

클라이언트(브라우저 내부) local database
네트워크없이 접근 가능, 빠름
브라우저의 객체 저장 가능
자바스크립트 객체, 파일, blobs 등을 저장
transaction을 지원함
자료형과 객체 저장 가능

• 장점
  1. 더 복잡하고 구조적인 데이터를 브라우저에서 다룰 수 있다.
  2. 더 많은 양의 데이터를 저장할 수 있다.
  3. 상호작용시에 더 많은 제어를 할 수 있다.
  4. 여러개의 데이터베이스, 그리고 각 DB 내부에 여러 개의 테이블을 가질 수 있다.
• 단점
  1. 웹 저장소 API보다 사용법이 더 복잡하다.
  

클라이언트(사용자)측 브라우저에 저장하기 위한 API

쿠키(cookies)

문서 내부에 간단한 문자열 데이터를 저장
적은양의 데이터만 저장 가능

로컬 저장소(Local Storage)

JSON 데이터를 문자열로 변환하여 저장
여전히 문자열만 저장되기 때문에 간단한 데이터만 저장 가능
사용자가 지우지 않는 이상 계속 지속됨

세션 저장소(Session Storage)

JSON 데이터를 오직 탭 세션에 저장
브라우저를 닫으면 데이터가 사라짐 (일회성)

IndexedDB

Key를 이용해 Index되는 구조화된 데이터를 쉽게 저장
브라우저 기반 내장 데이터베이스로 JS 관련 어플을 만들때 사용 가능

• 키/값 저장 가능(Key-Value 형태의 데이터베이스)
• Transaction 기능을 지원
• Key 범위의 쿼리와 Index를 지원
• localStorage에 비해 훨씬 많은 데이터 저장 가능

Index를 지원하기 때문에 많은 양의 구조화된 데이터를 다룰 때 적합하다.

IndexedDB 작업순서

데이터베이스 열기

let request = indexedDB.open(name, version);

name - 문자열, 데이터베이스 이름.
version - 기본적으로 양의 정수 버전 1

첫번째 버전 데이터 베이스 게시

let request = indexedDB.open('myDB', 1);

indexedDB 데이터 베이스 수정시 version을 수정해야함

데이터 베이스 열기

let onRequest = indexedDB.open('myDB', 1);
	onRequest.onsuccess = () => {
      console.log('Success creating or accessing db')
    }
    onRequest.onupgradeneeded = () => {
      const database = onRequest.result
    }
    onRequest.onerror = () => {
      console.log('Error creating or accessing db')
    }

로컬 데이터베이스 버전이 지정된 버전(1)보다 낮으면 onupgradeneeded가 트리거되고 데이터베이스 버전을 업그레이드
이벤트는 데이터베이스가 아직 존재하지 않을 때도 트리거되므로 초기화를 수행 가능

데이터베이스에 ObjectStore 생성

ObjectStore 란?

• 데이터를 담는 공간이며 여러개의 key-value 값으로 형성
• ObjectStore의 이름은 고유해야 함

ObjectStore 생성하기

	database.createObjectStore('store name', {keyPath:'id'})

   database.createObjectStore('store name', {autoIncrement:true})

연속적인 숫자를 각 객체에 저장(숫자, 객체 상관없이 따로 저장)

   database.createObjectStore('store name', {keyPath:'id', autoIncrement: true}) 

숫자를 객체 아이디라는 프로퍼티에 저장(특정 키 모두 인덱싱 가능)

onRequest.onupgradeneeded = () => {
  const database = onRequest.result
  const objectStore = database.createObjectStore('store name', {keyPath:'id'})
  }

.onupgradeneede() 으로 데이터베이스가 업그레이드 될 때 ObjectStore 생성 또는 수정 가능

const usersStore = database.createObjectStore('users', {keyPath: 'id'})

• createObjectStore(tableName)함수를 이용해서 usersStore라는 이름으로 ObjectStore를 생성하고 users라는 테이블을 만듦
  => usersStore 저장소에 users라는 테이블이 생성됨

• {keyPath:'id'}로 'id'를 제공하는데 필요한 인덱스 필드의 이름을 지정

const initializeDb = indexedDB.open('myDB', 1)
initializedDb.onupgradeneeded = () => {
  const database = initializeDb.result
  database.createObjectStore('users', {keyPath:'id'})
}

Transaction 시작 - 데이터 추가, 검색 작업 요청

Transaction 시작하기

const transaction = database.transaction("objectStore Name", "Transaction Mode")

모든 데이터 읽기 및 쓰기는 Transaction 내에서 수행됨

• objectStore Name: 객체 저장소 이름
• Transaction Mode: readonly, readwrite, versionchange

//users테이블에서 transaction을 instance화
const transaction = database.transaction('users', 'readwrite').objectStore('users')

1. transaction은 데이터베이스 객체 단위로 작동하므로 transaction을 사용할 객체 저장소를 지정해줘야 함
2. 'readwrite'모드 사용: 이미 존재하는 objectStore의 데이터를 읽고 다시 쓸 때

ObjectStore에 데이터 추가하기

const todos = database.createObjectStore('todos', {autoIncrement: true})
function addTodos() {
  const todo = {
    title: "todo1"
    text:"no.1 thing to do"
  }
//todos ObjectStore에 readwrite(읽기, 쓰기 가능)권한으로 Transaction시작하기
  const transaction = database.transaction("todos",'readwrite')
//objectStore()함수로 todos테이블 선택
  const todos = transaction.objectStore("todos")
//원하는 객체(todo)를 테이블에 추가
  todos.add(todo)
}

index 마다 DOM 이벤트 수신해서 작업

결과 수행

---

indexedDb가 활용 문법이 깔끔하지 않다는 의견이 많다던데, 그래서인지 이 부분은 오늘 강의만으로 이해하기에는 조금 어려웠다,,,
좀더 찾아보고 공부해보는 걸로!