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

全レコードの読み出し

オブジェクトストアに登録されたレコードをすべて読み取る場合はカーソルを使う。カーソルとは、データの読み出し位置を指すポインタである。このポインタを１つずつレコード単位で動かすことによって個々のレコード情報を読み出すことができる。

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

    // DB接続
    var dbname = input_el.value;
    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.onsuccess = function(event){
      // IDBDatabaseオブジェクトを取得
      var db = event.target.result;
      // IDBTransactionオブジェクトを取得
      var transaction = db.transaction(["mystore"],"readonly");
      // IDBObjectStoreオブジェクトを取得
      var store = transaction.objectStore("mystore");

      // カーソル準備開始（IDBrequestオブジェクト）
      var cursorreq = store.openCursor();
      // カーソル準備が成功したときの処理
      cursorreq.onsuccess = function(event){
        // IDBCursorオブジェクトを取得
        var cursor = event.target.result;
        // IDBCursorオブジェクトが存在すればレコードを表示して次へ
        if(cursor){
          // 検索されたレコードのオブジェクト
          var rec = cursor.value;
          $('<p>ID:' + rec.id + ', name:' + rec.name + ', price:' + rec.price + '</p>').appendTo(result);
          // カーソルを次のレコードに移動
          cursor.continue();
        }else{
          $('<p>検索終了しました。</p>').appendTo(result);
        }
　　　　db.close();
      }
    }
  });
});
</script>
</HEAD>
<BODY>
<p>全レコードの読み出し</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>

①カーソルを準備するには、IDBObjectStoreオブジェクト（変数store）のopenCursor()メソッドを使う。このメソッドを呼び出すと、非同期に先頭レコードにカーソルを移動する。このメソッドは、IDBRequestオブジェクト（変数cursorreq）を返す。
②カーソルの移動が完了すると、IDBRequestオブジェクト（変数cursorreq）のonsuccessプロパティにセットされたコールバック関数が呼び出される。このコールバック関数の引数に引き渡されるイベントオブジェクト（変数event）のtarget.resultプロパティから、カーソルを表すIDBCursorオブジェクト（変数cursor）が得られる。
③IDBCursorオブジェクトのvalueプロパティから、該当のレコードのオブジェクトが得られる。そして、continue()メソッドを呼び出すことで、カーソルを次のレコードに移動する。
④カーソルの移動が完了するたびに、カーソル準備開始のときに得られたIDBRequestオブジェクト（変数cursorreq）のonsuccessプロパティにセットされたコールバック関数が呼び出される。そのため、読み出しの繰り返し処理を記述する必要はない。

ページ: 1 2 3 4 5 6 7