構造化データ非同期ストレージ(Indexed Database API)

データベース操作

次のサンプルは、入力した名前でデータベースを生成する。データベースの生成が終わったら、すぐに切断し、生成したデータベースを削除する。

<script type="text/javascript">
$(function(){
  // IDBFactoryオブジェクトを取得
  var idb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
  if( !idb ) { 
     alert('indexedDBをサポートしていない');
     return;
  }
  $('#exec').click(function(){
    // データベース名を得る
    var input_el = document.querySelector("#name");
    var valid = input_el.checkValidity();
    if(valid === false){
      alert(input_el.validationMessage);
      return;
    }

    var dbname = input_el.value;
    var result = $('#result');
    // DB接続開始(IDBOpenDBRequestオブジェクト)
    // open()メソッド
    // * 第一引数:DB名(文字数)
    // * 第二引数:バージョン番号(整数)
    var openreq = idb.open(dbname,1);

    // DB接続に失敗したときの処理
    openreq.onerror = function(event){
      var error = event.taget.error;
      $('<p>DB接続に失敗しました ' + error.name + ' ' + error.message + '</p>').appendTo(result);
    }

    // DB生成に成功したときの処理
    // バージョン番号が上がったときも含む
    openreq.onupgradeneeded = function(event){
      // IDBDatabaseオブジェクトを取得
      var db = event.target.result;
      // DB名とバージョン番号を出力
      $('<p>DB生成に成功しました。 ' + db.name + ' ver:' + db.version + '</p>').appendTo(result);
    }

    // DB接続に成功したときの処理
    openreq.onsuccess = function(event){
      // IDBDatabaseオブジェクトを取得
      var db = event.target.result;
      $('<p>DB接続に成功しました。 ' + db.name + ' ver:' + db.version + '</p>').appendTo(result);
      // DBの切断
      db.close();
      $('<p>DBを切断しました。</p>').appendTo(result);
      // DB削除開始
      var deletereq = idb.deleteDatabase(dbname);
      // DB削除に失敗したときの処理
      deletereq.onerror = function(){
        $('<p>DB削除に失敗しました。</p>').appendTo(result);
      }
      // DB削除に成功したときの処理
      deletereq.onsuccess = function(event){
        $('<p>DB削除に成功しました。</p>').appendTo(result);
      }
    }
  });
});
</script>
</HEAD>
<BODY>
<p>Indexd Databaseの作成</p>
<form action="#" method="post" id="register">
 <label for="name">データベース名:</label>
 <input type="text" name="name" id="name" required>
 <input id="exec" type="button" value="実行">
</form>
<div id="result"></div>
</BODY>

Imdex Database APIでは最初に、window.indexDBプロパティからIDBFactoryオブジェクト(変数idb)を得る。このオブジェクトはデータベース全体を表していて、次のメソッドが利用できる。

IDBFactoryオブジェクトのメソッド
メソッド 説明
open(name,version) 引数nameの名前を持ったデータベースに接続する。該当するデータベースが存在しなければ、新規に生成する。バージョン番号は引数versionに整数で指定することができる。ただし、0を指定することはできない。指定がなければ1として処理される。
deleteDatabase(name) 引数nameの名前を持ったデータベースを削除する。

①IDBFactoryオブジェクト(変数idb)のopen()メソッドの第二引数にはバージョン番号を1以上の整数で指定できる。しかし、同じ名前のデータベースが存在し、そのバージョン番号より低い番号をopen()メソッドに指定すると、データベースの接続に失敗する。
②open()メソッドを実行すると、IDBOpenDBRequestオブジェクト(変数openreq)を返す。このオブジェクトには次の3つの状態イベントをプロパティに指定できる

  • onerrorプロパティには接続に失敗したときに呼び出されるコールバック関数
  • onupgradeneededプロパティにはデータベースが新たに生成されたとき、または、データベースのバージョン番号が上がったときに呼び出されるコールバック関数
  • onsuccessプロパティには接続に成功したときに呼び出されるコールバック関数

③open()メソッドによって接続しようとしたデータベース名とバージョン番号が一致するデータベースが存在しない場合は、まずonupgradeneededプロパティのコールバック関数が呼び出され、その直後に、onsuccessプロパティのコールバック関数が呼び出される。該当するデータベースがすでに存在していれば、onupgradeneededプロパティのコールバック関数は呼び出されず、onsuccessプロパティのコールバック関数のみが呼び出される。したがって、データベースの初期化(オブジェクトストアの生成など)処理は、onupgradeneededプロパティのコールバック関数に入れる。
④onupgradeneededとonsuccessプロパティにセットされたコールバック関数の引数に引き渡されるイベントオブジェクトのtarget.resultプロパティからIDBDatabaseオブジェクト(変数db)を取得する。このオブジェクトが接続したデータベースを表している。IDBDatabaseオブジェクト(変数db)では、次のプロパティとメソッドが利用できる。

IDBDatabaseオブジェクトのメソッド
プロパティとメソッド 説明
name データベース名を返す。
version データベースのバージョン番号を返す。
close() データベース接続を切断する。これは非同期ではない。
objectStoreNames オブジェクトストアのリストを返す。
createObjectStore(name,params) 引数nameに指定した名前のオブジェクトストアを生成する。引数paramsにはパラメータをオブジェクトで指定することができる。キーの名前やautoIncrementの有無を扱う。
deleteObjectStore(name) 引数nameに指定した名前のオブジェクトストアを削除する。
transaction(storeNames,mode) 引数storeNamesに指定した名前のリストにあるオブジェクトストアに対して、トランザクション処理の準備を行う。