JavaScript~indexedDB이란? 개념과 사용법에 대하여

indexedDB이란

indexedDB란 유저의 브라우저에 데이터를 저장하는 방법 중 하나입니다. 이전에 다룬 localStorage나 sessionStorage와 유사합니다. 하지만, local이나 session보다 대용량의 저장소를 제공하며, 유저의 브라우저에 데이터를 영구적으로 저장하여, 네트워크 상태에 상관없이 이용이 가능합니다.

제공 용량은 브라우저와 디스크 공간에 따라 다릅니다. 크롬과 크롬기반의 브라우커는 디스크 공간의 80%를 사용할 수 있으며, 각각의 단일 원본에서는 75%를 사용할 수 있습니다. 파이어 폭스의 경우 각 원본 별로 2GB의 데이터를 저장할 수 있으며, 사파리에서는 원본 별로 1GB의 데이터를 저장할 수 있습니다.

이번 포스팅에선 바닐라JS로 구연해 보겠습니다.

https://stackoverflow.com/questions/5692820/maximum-item-size-in-indexeddb

Maximum item size in IndexedDB

indexDB의 기본 패턴

1. 데이터베이스를 연다.
2. 객체 저장소(Object store)를 생성.
3. 트랜젝션(Transaction)을 시작해, 데이터를 추가하거나 읽어들이는 등의 데이터베이스 작업을 요청.
4. DOM 이벤트 리스너를 사용해 요청이 완료될때까지 대기.
5. 결과물을 이용한 조작.

indexDB의 사용 예

데이터베이스 열기

const dbName = 'sampleDB';

// 1. DB를 연다
const DBOpenRequest = indexedDB.open(dbName);

// 접속 후 처리
//기존의 DB버전을 갱신시 실행
DBOpenRequest.onupgradeneeded = function(event){
    console.log('db upgrade');
    // 보통은 초기화 처리를 실행
}

//접속시 에러가 발생하면 실행
DBOpenRequest.onerror = function(event){
    console.error("Error", DBOpenRequest.error);
}

//접속에 성공하면 실행
DBOpenRequest.onsuccess = function(event){
    console.log('db open success');
    let db = event.target.result;
}

DB를 열땐indexedDB.open(name, version)를 사용합니다. name에는 문자열 형태로 DB의 이름을 지정, version에는 버젼을 정수 형태로 지정합니다. version은 생략 가능하며, 디폴트 값은 1입니다.
DB에 접속시 버전이 갱신되는 경우 onupgradeneeded가 실행됩니다.
DB접속에 성공하면 onsuccess가 실행, 접속시 에러가 발생하면 onerror가 실행됩니다.

객체 저장소(Object store) 생성

const dbName = 'sampleDB';
const storeName  = 'sampleStore';

const openReq = indexedDB.open(dbName, 1);
//오브젝트 스토어 작성, 삭제는 DB를 갱신할 때만 가능하므로, 버전을 지정해 갱신한다.

  openReq.onupgradeneeded = function(event){
    let db = event.target.result;
    db.createObjectStore(storeName, {keyPath : 'id'})
  }

오브젝트 스토어의 작성, 삭제는 DB를 갱신할 때 실행되는 onupgradeneeded의 내부에서만 가능합니다.
DB의 신규작성 이외 DB를 갱신하려면, open()을 실행 할 때 DB의 새로운 버전을 지정합니다.

현재의 버전은, 이하의 방법으로 취득 가능 합니다.

const dbName = 'sampleDB';
const openReq = indexedDB.open(dbName, 1);

let dbVersion;

openReq.onsuccess = function(event){
  let db = event.target.result;
  dbVersion = db.version;
} 

데이터 삽입

const data = {id : 'test_id', name : 'test_name'};
const dbName = 'sampleDB';
const storeName  = 'sampleStore';

const openReq = indexedDB.open(dbName);

openReq.onsuccess = function(event){
    const db = event.target.result;
    const trans = db.transaction(storeName, 'readwrite');
    const store = trans.objectStore(storeName);
    const putReq = store.put(data);

    putReq.onsuccess = function(){
      //데이터 삽입이 완료되었을 때 실행
      console.log('put data success');
    }

    trans.oncomplete = function(){
     //트랜잭션이 완료(putReq.onsuccess후)되었을 때 실행
      console.log('transaction complete');
    }

 }

데이터 삽입에는 put과 add를 사용합니다.
put의 경우, 데이터의 삽입 뿐만 아니라 갱신도 가능해, key값이 중복되는 경우, 데이터를 덮어씁니다.
add의 경우, 데이터의 삽입만 가능하기 때문에, key값이 중복되는 경우, 에러가 발생합니다.

데이터 취득

const data = {id : 'test_id', name : 'test_name'};

const dbName = 'sampleDB';
const storeName  = 'sampleStore';

const openReq = indexedDB.open(dbName);

openReq.onsuccess = function(event){
  const db = event.target.result;
  const trans = db.transaction(storeName, 'readwrite');
  const store = trans.objectStore(storeName);
  const putReq = store.put(data);

  putReq.onsuccess = function(){
    console.log('put data success');
    // 이상, 상기의 '데이터 삽입'과 동일한 처리

    const getReq = store.get('test_id');

    getReq.onsuccess = function(event){
      console.log(event.target.result); // {id : 'test_id', name : 'test_name'}
    }
  }

}

get에서 key값을 지정해 취득할 데이터를 지정합니다.

 

참고)

https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB

IndexedDB 사용하기 - Web API | MDN

https://qiita.com/butakoma/items/2c1c956b63fcf956a137

IndexedDBの使い方 - Qiita

마지막으로

상기의 내용을 응용해, html과 바닐라JS이용한 간단한 to do list기능을 만들어 볼까 합니다.
to do list의 내용을 다루기엔 포스팅이 너무 길어질 것 같으니, 후속포스팅으로 나누겠습니다.