【JavaScript】Indexed Database APIを利用してオブジェクトを追加/取得/削除する

Indexed Database APIは、値とオブジェクトをローカルに保存するインタフェースです。このインタフェースを利用して、Indexed Databaseにオブジェクトを追加(更新)/取得/削除する処理のサンプルを書きました。

サンプルコード

function SampleDBHandler() {
     var _idb; // IDBDatabaseオブジェクト
    
     // DBのオープン
     this.open = function() {
          // Indexed DBの操作をするためのオブジェクト取得（ブラウザによって取得するプロパティが違う）
          var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
         
          // Indexed DBのオープン
          var request = indexedDB.open("sample");
         
          // アップグレード必要時のイベントハンドラ（DBが存在しない場合も呼ばれるので、それを利用してDBを新規作成する）
          request.onupgradeneeded = function() {
               console.log("open:onupgradeneeded");
              
               // req.resultにIDBDatabaseオブジェクトが格納されている
               _idb = request.result;
              
               // オブジェクトストアの作成
               _idb.createObjectStore("member", {keyPath: "userId"});
          }
         
          // 処理成功時のイベントハンドラ
          request.onsuccess = function(event) {
               console.log("open:onsuccess");
               _idb = request.result;
          }
         
          // 処理失敗時のイベントハンドラ
          request.onerror = function(event) {
               console.log("open:onerror");
               _idb = null;
          }
         
          // データベースを全部削除する場合
          //indexedDB.deleteDatabase("sample");
     }
    
     // オブジェクトの追加
     this.putMember = function(memberObj) {
          if (_idb) {
               // トランザクションを取得し、そこからストアオブジェクトを取得
               var transaction = _idb.transaction(["member"], "readwrite");
               var store = transaction.objectStore("member");
              
               // オブジェクトストアにデータを追加
               var request = store.put(memberObj);
               request.onsuccess = function (event) {
                    console.log("putMember:onsuccess");
               }
          }
     }
    
     // オブジェクトの取得
     this.getMember = function(key) {
          if (_idb) {
               var transaction = _idb.transaction(["member"], "readonly");
               var store = transaction.objectStore("member");
              
               // オブジェクトストアから、キー指定でデータを取得
               var request = store.get(key);
               request.onsuccess = function (event) {
                    console.log("getMember:onsuccess");
                    console.log(event.target.result);
               }
          }
     }
    
     // オブジェクトの削除
     this.deleteMember = function(key) {
          if (_idb) {
               var transaction = _idb.transaction(["member"], "readwrite");
               var store = transaction.objectStore("member");
              
               // オブジェクトストアから、指定されたキーのデータを削除
               var request = store.delete(key);
               request.onsuccess = function (event) {
                    console.log("deleteMember:onsuccess");
               }
          }
     }
    
     // DBのクローズ
     this.close = function() {
          if (_idb) {
               _idb.close();
          }
     }
}

DBのオープン (open)
IDBDatabaseオブジェクトは、データベースへの操作します。このオブジェクトをオープン時に保持して、追加、参照、削除処理で利用します。

オープン時にデータベースが存在していない場合、request.onupgradeneededが呼ばれます。ここでオブジェクトストアを作成します。オブジェクトストア名を"member"、キーを"userId"として登録しています。

オブジェクトの追加 (putMember)
まず、IDBDatabaseオブジェクトからトランザクションを取得し、そこからストアオブジェクトを取得します（参照、削除処理でも同様）。オブジェクトの追加はstore.putで行います。オブジェクトに含まれるキーがすでに存在している場合は更新となります。

オブジェクトの取得 (getMember)
オブジェクトの取得はstore.getで行います。取得が成功した場合、取得したオブジェクトはevent.target.resultに保持されています。

オブジェクトの削除 (deleteMember)
オブジェクトの削除はstore.deleteで行います。

本当は、各関数の引数にコールバック関数を持たせて呼び出し側で同期させる処理としたかったのですが、簡略のため割愛しました。SampleDBHandlerの利用は下記のように使用します（同期はsetTimeoutで代替）。

// SampleDBHandlerオブジェクト作成
var sampleDBHandler = new SampleDBHandler();
             
// DBのオープン
sampleDBHandler.open();
             
// オブジェクト追加
setTimeout(function() {
     sampleDBHandler.putMember({userId: "00000001", name: "hoge", age: 27});
}, 1000);
             
// オブジェクト取得
setTimeout(function() {
     sampleDBHandler.getMember("00000001");
}, 2000);
             
// オブジェクト削除
setTimeout(function() {
     sampleDBHandler.deleteMember("00000001");
}, 3000);
             
// DBのクローズ
setTimeout(function() {
     sampleDBHandler.close();
}, 4000);