IndexedDB 간단 정리하기

IndexedDB 를 익히고 이를 간단히 정리 해보려한다.

Indexed Database API 또는 IndexedDB (과거 이름: WebSimpleDB) 는 색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C 가 권고한 웹 브라우저 표준 인터페이스의 하나이다.

웹사이트는 데이터베이스에서 영속적인 데이터를 모아서 저장할 수 있다.

W3C는 2015년 1월 8일 IndexedDB 인터페이스를 위한 최종 권고안을 발행하였다.

Indexed Database API

IndexedDB 과 비슷한 WebSQL 이 있었지만, W3C 에서 2010 11월 8일에 WebSQL을 deprecated 하였다.

WebSQL 는 Relational Data Base System 을 지향하였고, IndexedDB 는 Index Table System 을 지향하고 있다.

IndexedDB 특징

IndexedDB 은 Transaction Database 를 사용하여 Key-Value 로 데이터를 관리하며, B-Tree 데이터 구조를 가진다.

IndexedDB 는 Transaction Model 을 따르며, 모든 변경은 Transaction 안에서 일어난다.
만약 Transaction 내에서 문제가 생긴다면, 모든 변경사항을 폐기되고 이전 상태로 돌아간다.

IndexedDB 은 same-origin policy 을 따른다 때문에, http 도메인에서 만든 IndexedDB 는 다른 https 도메인에서는 접근할 수 없다.

IndexedDB 데이터는 영속적으로 유지되지만, 특정 상황에 따라 삭제될 수 있다.

IndexedDB 요소

Database

1. Version 과 N개의 Object Store 를 가진다.
2. 브라우저는 여러 Database 를 가질 수 있다.
3. indexedDB.open 로 열수 있다.

Object Store

1. 데이터를 담는 공간이다.
2. N개의 레코드(Key-Value) 를 가질 수 있다.
3. Value 의 형태는 다른 Value 들과 일치하지 않아도 된다.
4. 레코드는 Key 에 따라 오름차순으로 정렬된다.
5. Object Store 이름은 고유 해야한다.
6. IDBRequest.createObjectStore 로 만들 수 있다.
7. Object store 에 key path 를 설정하면, in-line keys (내부 key) 를 사용하며, 그 외에는 out-of-line keys (외부 key) 를 사용한다.

Transaction

1. IndexedDB API 작업은 transaction contect 내에서 발생한다.
2. transaction contect 내에서 작업이 실패하면, 해당 작업 상태는 적용되지 않고, 이전 상태로 돌아간다.
3. 만약 transaction 외부에서 IndexedDB API 를 호출하면, 에러가 발행한다.
4. IDBRequest.transaction 로 만들수 있다.
5. transaction 은 readwrite, readonly, versionchange 상태를 가질 수 있다.

Curser

1. Curser 는 Database 의 여러 레코드 (Object Store) 를 순회하거나 반복 할 수 있다.
2. ObjectStore.openCursor 에 key 혹은 key range (IDBKeyRange) 쿼리를 전달하고, IDBCursorWithValue 를 전달받아 continue 로 반복 조회 한다.

Index

1. Index 는 Object Store 를 참조하는 Object Store 이다.
2. IDBObjectStore.createIndex 로 만들 수 있다.
3. Object Store 에 Index 와 관련된 레코드가 업데이트 되면 자동으로 업데이트 된다.

IndexedDB 간단한 예제

if (window.indexedDB) {
  var name = 'IndexedDB Name';
  var version = 1;
  var db = null;
  // IDBOpenDBRequest
  var request = indexedDB.open(name, version);
  // 기존의 저장된 데이터베이스보다 큰 버전 번호의 데이터베이스가 로드 될 때 트리거된다.
  request.onupgradeneeded = function(event) { 
    // IDBDatabase
    db = request.result;
    var key = "id";
    var name = 'store name';
    // IDBObjectStore
    var store = db.createObjectStore(name, { keyPath: key });
    var indexName = 'by_name';
    var keyPath = 'name';
    // IDBIndex
    var index = store.createIndex(indexName, keyPath);
    var obj = {
      [key]: 1,
      [keyPath]: "name"
    }
    store.put(obj);
  };
  request.onsuccess = function(event) {
    db = request.result;
    // IDBTransaction
    var transaction = db.transaction(['store name'], "readonly");
    // IDBObjectStore
    var objectStore = transaction.objectStore('store name');
    // IDBRequest
    var cursor = objectStore.openCursor();
      cursor.onsuccess = function(event) {
        // IDBCursorWithValue
        var cursor = event.target.result;
        if ( cursor ) {
          // {id: 1, name: "name"}
          console.log(cursor.value)
          cursor.continue();
        } else {
          console.log('end');
        }
      };
  };
}

1. window.indexedDB 가 존재하는지 확인한다.
2. indexedDB.open 로 데이터베이스를 열고, IDBOpenDBRequest 를 전달받는다.
3. 데이터베이스 를 처음 만들었기 때문에 onupgradeneeded 함수가 실행된다.
4. request.result 로 IDBDatabase 를 전달 받는다.
5. createObjectStore 객체 저장소를 생성하고, IDBObjectStore 를 전달 받는다.
6. createIndex 로 Index 객체 저장소를 생성하고, IDBIndex 를 전달 받는다.
7. IDBObjectStore.put 로 레코드를 추가한다.
8. 데이터베이스 가 호출되는데 성공했기 때문에, onsuccess 함수가 실행된다.
9. transaction 로 transaction contect 을 생성하고, IDBTransaction 를 전달 받는다.
10. objectStore 로 객체 저장소를 찾아 IDBObjectStore 를 전달 받는다.
11. openCursor 로 Cursor 를 요청하는 IDBRequest 를 전달 받는다.
12. Cursor 요청에 성공했기 때문에, onsuccess 함수가 실행된다.
13. event 로 IDBCursorWithValue 를 전달 받는다.
14. cursor 로 찾은 value 를 확인한다.
15. continue 로 다음 커서를 요청한다.

IndexedDB 와 Storage 차이

IndexedDB 많은 데이터를 저장하기 하고, 이를 Index 를 이용하여, 빠르게 검색할 수 있게 설계 되었다.

Storage 인 Local Storage 와 Session Storage 는 최대 10MB 만 저장이 가능하며, 오직 String 형태만 저장이 가능하다.

IndexedDB 는 javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다.

IndexedDB 는 용량 제한은 특별히 없으나, HDD 저장소 상태 나 브라우저의 상태에 따라서 달라 질 수 있다.

시크릿 모드에서 IndexedDB, Storage 를 사용하면, 값은 저장되지 않고 브라우저 종료시 사라진다.

작은 규모의 데이터는 Storage 를 사용하는것이 좋지만, 큰 데이터는 IndexedDB 를 사용하는 것이 여러모로 유리하다.

마무리

IndexedDB 에 대해서 간단하게 알아보았다.

IndexedDB 는 IE 10 이상부터 구현되어 있지만, 모든 기능이 구현되어있지는 않다.
Safari 에서도 특정 버전에서는 문제가 있을 수 있다.

IndexedDB 를 잘 활용하면 PWA 같은 SPA 페이지를 만들때 매우 도움이 될 것 같다.