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

インデックス対照のカラムから前方一致検索

Indexed Database APIでは主キーからでなく、インデックスを設定したカラムの値からも検索できる。
下記に示すサンプルに沿って説明すると、
①まずIDBObjectStoreオブジェクト（変数store）のIndexメソッドを使って、インデックスを表すIDBIndexオブジェクトを取得する。
②次に、IDBKeyRangeオブジェクトのbound()メソッドを使って、IDBKeyRangeオブジェクトを生成する。これが検索条件を表すオブジェクトになる。bound()メソッドの引数に、検索する最小値と最大値を与える。文字列比較になるため、ここでは最小値に”商品11″を、最大値に”商品19″を指定する。
③最後に、IDBIndexオブジェクト（変数index）のopenCursor()メソッドを使って、カーソルの準備を開始する。引数には、IDBKeyRangeオブジェクト（変数range）を指定する。

<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");
      // インデックスを取得（IDBIndexオブジェクト）
      var index = store.index("name_index");
      // 検索条件を生成（IDBKeyRangeオブジェクト）
      var range = IDBKeyRange.bound("商品11","商品19");
      // カーソル準備開始（IDBrequestオブジェクト）
      var cursorreq = index.openCursor(range);
      // カーソル準備が成功したときの処理
      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="resul

IDBKeyRangeオブジェクトを作り替えれば、検索条件を変えることが可能である。このオブジェクトに定義されたメソッドは次の通りである。

IDBKeyオブジェクトの条件定義メソッド
メソッド 説明
only(value) 引数valueの値に完全一致するIDBKeyRangeオブジェクトを返す。
lowBound(lower) 引数lower以上の値に一致するIDBKeyRangeオブジェクトを返す。
upperBound(upper) 引数upper以下の値に一致するIDBKeyRangeオブジェクトを返す。
bound(lower,upper) 引数lower以上でかつ引数upper以下の値に一致するIDBKeyRangeオブジェクトを返す。
ページ: 1 2 3 4 5 6 7