IDBIndex: keyPath プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

IDBIndex インターフェイスの keyPath プロパティは、現在のインデックスのキーパスを返します。null の場合は、このインデックスは自動生成されません。

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

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

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

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

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

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

  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("全エントリーを表示しました。");
    }
  };
}