IDBIndex: name プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

IDBIndex インターフェイスの name プロパティは、このインデックスの名前を表す文字列が入っています。

メモ: この機能はウェブワーカー内で利用可能です。

値

このインデックスの名前を表す文字列です。

例外

インデックスの名前を変更しようとすると発生しうる例外がいくつかあります。

InvalidStateError DOMException

インデックスか対応するオブジェクトストアが削除済であるとき、または現在のトランザクションがアップグレードトランザクションでないとき投げられます。インデックスの名前の変更はアップグレードトランザクション、すなわちモードが "versionchange" であるトランザクションでのみ可能です。

TransactionInactiveError DOMException

現在のトランザクションが実行中でないとき投げられます。

ConstraintError DOMException

指定の name を用いるインデックスが既に存在するとき投げられます。

例

以下の例では、トランザクションとオブジェクトストアを開き、シンプルな連絡先データベースからインデックス lName を取得します。そして、このインデックスで IDBIndex.openCursor により基本的なカーソルを開きます。これは、返されるレコードが主キーではなくこのインデックスに基づいてソートされる以外、ObjectStore で直接 IDBObjectStore.openCursor を用いてカーソルを開くのと同じように動きます。

このインデックスの名前をコンソールに記録します。これは lName になるはずです。

最後に、各レコードを走査し、データを HTML テーブルに挿入します。動く例全体は、IndexedDB-examples デモレポジトリーを参照してください。(動く例を見る)

js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  console.log(myIndex.name);

  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("全エントリーを表示しました。");
    }
  };
}

仕様書

Specification
Indexed Database API 3.0
# ref-for-dom-idbindex-name①

ブラウザーの互換性

BCD tables only load in the browser

関連情報