DOM

インターフェイス

IDBKeyRange インターフェイス

  編集:2022.04.06 by T.A.

MS(en-US)

IndexedDB API の IDBKeyRange インターフェイスは、キーに使用される一部のデータ型の連続間隔を表します。レコードは、キーまたはキーの範囲を使用して IDBObjectStore および IDBIndex オブジェクトから取得できます。下限と上限を使用して範囲を制限できます。たとえば、値の範囲A~Zのキーのすべての値を反復処理できます。

キー範囲は、単一の値、または上限と下限または端点を持つ範囲にすることができます。キー範囲に上限と下限の両方がある場合、それは制限されます。限界がない場合は、それは無制限です。制限されたキー範囲は、開いている(エンドポイントが除外されている)か、閉じている(エンドポイントが含まれている)かのいずれかです。特定の範囲内のすべてのキーを取得するには、次のコード構造を使用できます:

範囲 コード
All keys ≧ x IDBKeyRange.lowerBound(x)
All keys > x IDBKeyRange.lowerBound(x, true)
All keys ≦ y IDBKeyRange.upperBound(y)
All keys < y IDBKeyRange.upperBound(y, true)
All keys ≧ x && ≦ y IDBKeyRange.bound(x, y)
All keys > x && < y IDBKeyRange.bound(x, y, true, true)
All keys > x && ≦ y IDBKeyRange.bound(x, y, true, false)
All keys ≧ x && < y IDBKeyRange.bound(x, y, false, true)
The key = z IDBKeyRange.only(z)

次の条件が当てはまる場合、key はキー範囲内にあります:

注: この機能は Web Workers で使用できます

プロパティ
IDBKeyRange.lower 読取専用
キー範囲の下限。
IDBKeyRange.upper 読取専用
キー範囲の上限。
IDBKeyRange.lowerOpen 読取専用
下限値がキー範囲に含まれている場合はfalseを返します。
IDBKeyRange.upperOpen 読取専用
上限値がキー範囲に含まれている場合はfalseを返します。
メソッド
静的メソッド
IDBKeyRange.bound()
上限と下限を持つ新しいキー範囲を作成します。
IDBKeyRange.only()
単一の値を含む新しいキー範囲を作成します。
IDBKeyRange.lowerBound()
下限のみで新しいキー範囲を作成します。
IDBKeyRange.upperBound()
新しい上限キー範囲を作成します。
インスタンス メソッド
IDBKeyRange.includes()
指定されたキーがキー範囲内にあるかどうかを示すブール値を返します。
次の例は、キー範囲の使用方法を示しています。ここでは、keyRangeValue を「A」と「F」の値の間の範囲として宣言します。トランザクション(IDBTransactionを使用)とオブジェクト ストアを開き、IDBObjectStore.openCursor でカーソルを開き、keyRangeValue をオプションのキー範囲値として宣言します。これは、カーソルがその範囲内のキーを持つレコードのみを取得することを意味します。この範囲には、値「A」と「F」が含まれます。オープン バウンドであるべきだと宣言していないので。IDBKeyRange.bound("A", "F", true, true); 、を使用した場合、その場合、範囲には「A」と「F」は含まれません、それらの間の値のみ。

注: キー範囲を試すことができるより完全な例については、IDBKeyRange-サンプルリポジトリ をご覧ください(サンプルもライブでご覧ください)。

function displayData() {
  var keyRangeValue = IDBKeyRange.bound("A", "F");

  var transaction = db.transaction(['fThings'], 'readonly');
  var objectStore = transaction.objectStore('fThings');

  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
      var listItem = document.createElement('li');
      listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log('Entries all displayed.');
    }
  };
}

テスト
HTML:

ここに表示
スクリプト組み込み:



スクリプト:


スクリプト:



表示内容:
表示内容: