Indexed Database API

* Indexed Database API란?

- Indexed Database API는 Web Storage보다 본격적인 데이터 저장 장치임.

- 일반적인 데이터베이스처럼 트랜잭션(일련의 처리를 한 덩어리로 해서 실패한 경우 전체를 원래 대로 되돌리는 장치)을 지원함.

 

[데이터 저장 방법]

- Indexed Database API는 관계형 데이터베이스와는 조금 다른 저장 방법을 사용함.

- 값을 구할 때 색인이 되는 키(키패스)를 하나 지정할 수 있음.

- 검색을 효율적으로 하기 위한 인덱스를 지정할 수 있음.

- JavaScript의 오브젝트로 되어 있음.

- 값의 행 수가 달라도 저장할 수 있음.

 

* 데이터베이스의 작성과 접속

- 데이터베이스를 작성하려면 window.indexedDB의 open() 메서드를 사용해야 함.

 

var req = indexedDB.open("db_book");

  리퀘스트 오브젝트         데이터베이스명

req.onerror = function(event) { 오류 처리 };

req.onsuccess = function(event) { 성공 시 처리 };

 

- 데이터베이스를 작성한 후 처리는 open() 메서드 바로 다음이 아니라 open() 메서드의 반환 값인 onsuccess 프로퍼티 안에 작성함.

- 이렇게 하는 이유는 처리를 하는 동안 사용자가 기다리지 않게 하기 위해서임. (이를 '비동기 처리'라고 함.)

 

 

* 버전의 설정과 오브젝트 스토어 작성하기

- 데이터베이스는 버전 정보를 갖고 있기 때문에 오브젝트 스토어의 작성은 데이터베이스의 버전이 바뀌었을 때만 할 수 있음.

- 버전의 변경에는 setVersion() 메서드를 사용함.

 

var db_book - req.result;    // 조금 전에 구한 리퀘스트 오브젝트의 result 프로퍼티가 데이터 베이스 오브젝트 본체가 됨.

var version = 1;

var req2 = db_book.setVersion(version.toString());        // 버전 변경

req2.onsuccess - function(event) { 성공 시 처리 };

 

- 버전 변경이 성공하면 아래와 같이 오브젝트 스토어를 작성함.

- 계속해서 인덱스도 작성함.

 

var store = db_book.createObjectStore("objstr_picbook", {"keyPath" : "ISBN", "autoIncrement" : false});

  오브젝트 스토어의 오브젝트  오브젝트 스토어명  검색을 위한 키(키 패스)의 이름     true로 하면 키 패스가 주어지지 않았을 때 자동으로 인접한 번호의 키를 작성함.

store.createIndex("nameIndex", "name");

  새로 만들 인덱스의 이름        인덱스로 할 키의 이름

 

 

* 트랜잭션

- 트랜잭션이란, 도중에 중단되면 데이터의 무결성에 오류가 발생할지도 모르는 여러 개의 처리를 하나로 모은 것을 말함.

- 일반적으로 데이터베이스의 조작은 트랜잭션이라는 단위로 수행함.

- 트랜잭션을 시작하려면 아래와 같이 해야 함.

 

var tr = db_book.transaction(["objstr_picbook"], IDBTransaction.READ_WRITE)    

트랜잭션 오브젝트       대상이 되는 오브젝트 스토어의 배열       액세스 모드(읽기 가능)

var store = tr.objectStore("objstr_picbook");         // 트랜잭션 오브젝트로부터 오브젝트 스토어를 구할 수 있음.

 

- 다른 트랜잭션이 시작되거나 메서드가 종료되면 암묵적으로 커미트(성공으로 간주하고 종료)되고, 오류나 타임아웃이 발생하면 자동으로 롤백(취소)됨.

- 명시적으로 지정하고 싶은 경우는 abort()를 사용함.

 

tr.abort();

 

 

* 데이터 조작하기

 

[추가]

 

var pricebook_data = [ {ISBN: "978-89-315-4298-7", name:"C가 보이는 그림책", price:14000},

  {ISBN: "978-89-315-5004-7", name:"PHP가 보이는 그림책", price:15000, date:"2008/12/12"},

  {ISBN: "978-89-315-4894-5", name:"Perl이 보이는 그림책"} ];

for (var i = 0; i < picbook_data.length; i++) {

store.add(picbook_data[i]);        // 한 건씩 추가함.

}

 

- 데이터를 추가하려면 add()메서드를 사용해야 함.

- 오브젝트 스토어를 작성할 때 키 패스의 지정을 생략한 경우는 add() 메서드의 제2인수에 키 이름을 지정할 수 있음. (키 패스를 지정하는 것을 인라인 키, 생략하고 나중에 지정하는 것을 '아웃 오브 라인 키'라고 함.)

 

[한 건 취득]

 

- 키를 기본으로 한 건의 데이터를 구하려면 get() 메서드를 사용해야 함.

 

var req = store.get("978-89-315-4894-5");

req.onsuccess = function(event) {

console(req.result.name);         // 결과는 리퀘스트 오브젝트의 result 프로퍼티로 구할 수 있음.

}

 

[삭제]

 

- 키를 바탕으로 한 건을 삭제하려면 delete() 메서드를 사용해야 함.

 

var req = store.delete("978-89-315-5004-7");

 

[데이터의 검색과 변경]

 

- 인덱스를 바탕으로 데이터를 검색할 때, 커서라는 것을 사용함.

 

var req = store.index("priceIndex").openCursor(IDBKeyRange.lowerBound(15000, false));     // '15,000원 이상'이라는 범위를 나타냄.

               참조할 인덱스명                  커서를 엶. 제2인수에는 조건을 지정함. null을 지정하면 전체 데이터를 구함.

req.onsuccess = function(event) [    // onsuccess의 처리는 데이터 건수에 따라 여러 번 호출됨.

var cursor = event.result || event.target.result;         // 커서를 구함. (req.result로도 가능)

console.log(book.name);                // 콘솔에 출력함.

cursor.continue();            // 커서를 갱신함

}

}

 

- 데이터를 변경하려면 검색으로 얻은 데이터에 대해 변경한 후 update() 메서드로 변경을 반영해야 함.

 

book.description = "updated";

cursor.update(book);

 

- 첫째 행을 아래와 같이 하면 인덱스가 아니라 키 명으로 검색할 수 있음.

 

var req = store.openCursor();

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
Indexed Database API	X	O	X	X	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)