IndexedDBメモ

| コメントをどうぞ

IndexedDBを調べるため、サンプルアプリとしてTODOリストを作成してみたのですが

作成したTODOリスト

コールバック地獄に陥ったのでクールダウンのため、使用した関数や分かったことをこのブログにまとめました。

動作確認に使用したブラウザはGoogle Chromeのみです。

Google Chromeディベロッパーツール

データベースのオープン

var request = indexedDB.open( ${dbName}, ${dbVersion} );
  • ${dbName}:データベース名
  • ${dbVersion}:オープンするデータベースのバージョン

返却されるIDBOpenDBRequestに対して次のコールバック関数を定義

request.onupgradeneeded = function(event) {
/*
* オブジェクトストアはここで作成可能(詳細は後述)
*/
};

request.onsuccess = function(event) {
/*
* データベースのオープンの成功後に実行したい処理内容
*/
};

request.onerror = function(event) {
/*
* データベースのオープンでエラーが発生した際に実行したい処理内容
*/
};

オブジェクトストアの作成

request.onupgradeneeded = function(event) {
var db = event.target.result;
var store = db.createObjectoStore( ${storeName} , { keyPath : ${key} });
};
  • ${storeName}:作成するオブジェクトストアの名前。(オブジェクトストアはRDBにおける「テーブル」と似ている。)
  • ${key}:キー

onupgradeneedeはデータベースのバージョンがアップするとコールされる。(初めてデータベースを作成する場合もコールされる。)
オブジェクトストアの作成(、削除)はトランザクションモードがversionchangeである時に可能で、onupgradeneeded内ではトランザクションモードはversionchangeになる。

トランザクションの開始

var transaction = db.transaction( ${objectStoreList} , ${transactionMode} );
  • ${objectStoreList}:トランザクション処理対象のオブジェクトストア
  • ${transactionMode}:トランザクションモード

${transactionMode}に指定できる値は次の通り。

  • readonly:データの読み取りのみ可能
  • readwrite:データの変更も可能

例えばschedulecategoryというオブジェクトストアをトランザクション処理するには

var transaction = db.transaction([ "schedule", "category" ], "readonly");

オブジェクトストアの取得

var store = transaction.objectStore( ${storeName} );
  • ${storeName}:取得したいオブジェクトストア名

IDBTransactionobjectStore関数の実行でIDBObjectStoreが返却されます。

1件のレコードに対する操作

  • 追加
  • 取得
  • 更新
  • 削除

大体はIDBObjectStoreの関数を実行して返却されるIDBRequestのコールバックを定義すればよかったです。(成功した場合はonsuccess、エラー発生時の処理はonerror

追加

var request = store.add( ${record} );
// record: { key : "1234567890", todo : "ブログ執筆" done : "false" }
  • ${record}:追加したいレコードのキー
request.onsuccess = function(event) {
/* レコードの追加処理が成功した後に実行したい処理 */
};
request.onerror = function(event) {
/* エラー処理 */
};

取得

var request = store.get( ${key} );
  • ${key}:取得したいレコードのキー

以下はレコードを取得する例です。

request.onsuccess = function(event) {
// レコードの取得
var record = event.target.result;

/*
* record: { key : "1234567890", todo : "ブログ執筆", done : false }
*/
};

request.onerror = function(event) {
/* エラー処理 */
};

更新

var request = store.put( ${record} );
/*
* record: { key : "1234567890", todo : "バグフィックス12345", done : true }
*/

request.onsuccess = function() {
/* レコードの更新処理が成功した後に実行したい処理 */
};
request.onerror = function() {
/* エラー処理 */
};

削除

var request = store.delete( ${key} );
  • ${key}:削除したいレコードのキー
request.onsuccess = function(event) {
/* レコードの削除処理が成功した後に実行したい処理 */
};
request.onerror = function(event) {
/* エラー処理 */
};

レコードの全件取得

IDBObjectStoreopenCursor関数を実行して返却されるIDBRequestのonsuccessコールバック内で可能です。

var request = store.openCursor();
request.onsuccess = function(event) {
var cursor = event.target.result;

if (cursor) {
var record = cursor.value;

/*
* record: { key : "1234567890", todo : "BugFix #12345", done : false }
*/

cursor.continue();
// この関数を実行する度にrequest.onsuccessが呼び出される
}
};

データベースの削除

indexedDB.deleteDatabase( ${dbName} );
  • ${dbName}:削除したいデータベース名

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>