IndexedDBからレコード (データ)を検索するコードと実行結果

概要

IndexedDBのデータを取得する場合は、オブジェクトストアのgetメソッドを呼び出してデータを取得します。

書式

(IDBObjectStore).get([取得するオブジェクトのID]);

または

(IDBObjectStore).get([検索するフィールドの値]);

実装例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>


  <script type="text/javascript">
    var dbname = "myDB";
    var storename = "myStore";

    var db;

    function OpenMyDatabase() {

      const request = indexedDB.open(dbname, 1);

      request.onupgradeneeded = function (event) {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(storename)) {
          db.createObjectStore(storename, { keyPath: "id" });
          alert('オブジェクトストアを作成しました。');
        }
      };

      request.onsuccess = function (event) {
        db = event.target.result;
        alert('データベースをオープンしました。');
      }

      request.onerror = function (event) {
        console.error("データベースのオープンに失敗しました:", event.target.error);
      };
    }

    function InsertData() {
      const transaction = db.transaction(storename, "readwrite");
      const store = transaction.objectStore(storename);

      store.add({ id: 1, name: "ぺんぎんクッキー", price: 280 });
      store.add({ id: 2, name: "しろくまアイス", price: 160 });
      store.add({ id: 3, name: "らくだキャラメル", price: 90 });
      store.add({ id: 4, name: "かるがもサブレ", price: 85 });
      store.add({ id: 5, name: "きりんキャンディー", price: 50 });

      transaction.oncomplete = function () {
        console.log("データベースにレコードを挿入しました。");
      };
    }

    function SelectData() {
      const transaction = db.transaction(storename, "readonly");
      const store = transaction.objectStore(storename);

      const getRequest = store.get(2); // ここではIDが2のレコードを取得

      getRequest.onsuccess = function (event) {
        const data = event.target.result;
        if (data) {
          console.log("データ取得成功:", data);

          var elem = document.getElementById("output");
          elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
        } else {
          console.log("指定されたIDのレコードが見つかりませんでした。");
          alert("指定されたIDのレコードが見つかりませんでした。");
        }
      };

      getRequest.onerror = function (event) {
        console.error("データの取得に失敗しました:", event.target.error);
      };
    }
  </script>


</head>
<body>
  <h2>Indexed DB getAllData テストページ</h2>
  <a href="javascript:OpenMyDatabase();">OpenDatabase</a><br>
  <a href="javascript:InsertData();">InsertData</a><br>
  <a href="javascript:SelectAllData();">SelectData</a><br>
  <hr>
  <div id="output"></div>

</body>
</html>

解説

データベースを開く部分についてはこちらの記事を参照してください
レコードを挿入する部分についてはこちらの記事を参照してください
レコードの一覧を表示する部分についてはこちらの記事を参照してください

レコードの取得部分は以下のコードになります。

  function SelectData() {
    const transaction = db.transaction(storename, "readonly");
    const store = transaction.objectStore(storename);

    const getRequest = store.get(2); // ここではIDが2のレコードを取得

    getRequest.onsuccess = function (event) {
      const data = event.target.result;
      if (data) {
          console.log("データ取得成功:", data);

          var elem = document.getElementById("output");
          elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
      } else {
        console.log("指定されたIDのレコードが見つかりませんでした。");
        alert("指定されたIDのレコードが見つかりませんでした。");
      }
    };

    getRequest.onerror = function (event) {
      console.error("データの取得に失敗しました:", event.target.error);
    };
  }

はじめに、トランザクションオブジェクトとオブジェクトストアを取得します。

    const transaction = db.transaction(storename, "readwrite");
    const store = transaction.objectStore(storename);

store.get()メソッドを呼び出しレコードのオブジェクトを取得します。

    const getRequest = store.get(2); // ここではIDが2のレコードを取得

オブジェクトが取得できた場合は、IDBRequestのonsuccessイベントが実行されます。以下のコードで、取得したレコードの値をページに表示します。

    getRequest.onsuccess = function (event) {
      const data = event.target.result;
      if (data) {
          console.log("データ取得成功:", data);

          var elem = document.getElementById("output");
          elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
      } else {
        console.log("指定されたIDのレコードが見つかりませんでした。");
        alert("指定されたIDのレコードが見つかりませんでした。");
      }
    };

    getRequest.onerror = function (event) {
      console.error("データの取得に失敗しました:", event.target.error);
    };

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
IndexedDBからレコード (データ)を検索するコードと実行結果:画像1

[OpenDatabase]のリンクをクリックします。

オブジェクトのストアの作成とデータベースのオープンが実行されます。

[InsertData]のリンクをクリックしデータをデータベースに挿入します。
IndexedDBからレコード (データ)を検索するコードと実行結果:画像5

[SelectData]のリンクをクリックします。データベースには複数のレコードが挿入されていますが、 ID=2 の "しろくまアイス"のレコードのみが取得され、ページに表示されます。
IndexedDBからレコード (データ)を検索するコードと実行結果:画像6

指定したIDのレコードを取得できました。

条件式

条件式	メソッド	意味
==	IDBKeyRange.only(value)	与えた値と等しいキーを持つレコードを検索します。
<=	IDBKeyRange.lowerBound(value, false)	指定した値以上のキーを持つレコードを検索します。
<	IDBKeyRange.lowerBound(value, true)	指定した値より大きいキーを持つレコードを検索します。
>=	IDBKeyRange.upperBound(value, false)	指定した値以下のキーを持つレコードを検索します。
>	IDBKeyRange.upperBound(value, true)	指定した値より小さいキーを持つレコードを検索します。
<= && >=	IDBKeyRange.bound(lower, upper, [lowerOpen], [upperOpen])	指定した範囲内のキーを持つレコードを検索します。[lowerOpen], [upperOpen] をtrueにすると、それぞれの境界値の値を含まない動作になります。

実装例:検索の場合

レコードを検索する場合の例です。検索の場合はインデックスを作成する必要があります。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>


  <script type="text/javascript">
    var dbname = "myDB";
    var storename = "myStore";

    var db;

    function OpenMyDatabase() {

      const request = indexedDB.open(dbname, 1);

      request.onupgradeneeded = function (event) {
        const db = event.target.result;
        // オブジェクトストアを作成
        if (!db.objectStoreNames.contains(storename)) {
          const objectStore = db.createObjectStore(storename, { keyPath: "id" });
          objectStore.createIndex("price", "price", { unique: false });

          alert('オブジェクトストアを作成しました。');
        }
      };

      request.onsuccess = function (event) {
        db = event.target.result;
        alert('データベースをオープンしました。');
      }

      request.onerror = function (event) {
        console.error("データベースのオープンに失敗しました:", event.target.error);
      };
    }

    function InsertData() {
      // トランザクションとオブジェクトストアの取得
      const transaction = db.transaction(storename, "readwrite");
      const store = transaction.objectStore(storename);

      // データの追加
      store.add({ id: 1, name: "ぺんぎんクッキー", price: 280 });
      store.add({ id: 2, name: "しろくまアイス", price: 160 });
      store.add({ id: 3, name: "らくだキャラメル", price: 90 });
      store.add({ id: 4, name: "かるがもサブレ", price: 85 });
      store.add({ id: 5, name: "きりんキャンディー", price: 50 });

      transaction.oncomplete = function () {
        console.log("データベースにレコードを挿入しました。");
      };
    }

    function SelectData() {
      const transaction = db.transaction(storename, "readonly");
      const store = transaction.objectStore(storename);
      const index = store.index("price");

      const results = [];
      const cursorRequest = index.openCursor(IDBKeyRange.lowerBound(100));

      cursorRequest.onsuccess = function (event) { 
        const cursor = event.target.result;
        if (cursor) {
          results.push(cursor.value);
          cursor.continue();
        } else {
          console.log("検索結果:", results);
          var elem = document.getElementById("output");
          results.forEach(function (data) {
            elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
          });
        }
      };

      getRequest.onerror = function (event) {
        console.error("データの取得に失敗しました:", event.target.error);
      };
    }
  </script>


</head>
<body>
  <h2>Indexed DB getData テストページ</h2>
  <a href="javascript:OpenMyDatabase();">OpenDatabase</a><br>
  <a href="javascript:InsertData();">InsertData</a><br>
  <a href="javascript:SelectData();">SelectData</a><br>
  <hr>
  <div id="output"></div>
</body>
</html>

解説

データベースを開く部分についてはこちらの記事を参照してください
レコードを挿入する部分についてはこちらの記事を参照してください
レコードの一覧を表示する部分についてはこちらの記事を参照してください

インデックスの作成

オブジェクトストアを作成する際に、インデックスを作成します。

  request.onupgradeneeded = function (event) {
    const db = event.target.result;
    // オブジェクトストアを作成
    if (!db.objectStoreNames.contains(storename)) {
      const objectStore = db.createObjectStore(storename, { keyPath: "id" });
      objectStore.createIndex("price", "price", { unique: false });

      alert('オブジェクトストアを作成しました。');
    }
  };

createIndexの書式は以下です。

(IDBObjectStore オブジェクト).createIndex([インデックス名], [インデックスのフィールドプロパティ名], { [オプション] });

検索

検索は以下のコードです。

  function SelectData() {
    const transaction = db.transaction(storename, "readonly");
    const store = transaction.objectStore(storename);
    const index = store.index("price");

    const results = [];
    const cursorRequest = index.openCursor(IDBKeyRange.lowerBound(100));

    cursorRequest.onsuccess = function (event) { 
      const cursor = event.target.result;
      if (cursor) {
        results.push(cursor.value);
        cursor.continue();
      } else {
        console.log("検索結果:", results);
        var elem = document.getElementById("output");
        results.forEach(function (data) {
          elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
        });
      }
    };

    getRequest.onerror = function (event) {
      console.error("データの取得に失敗しました:", event.target.error);
    };
  }

はじめに、トランザクションオブジェクトとオブジェクトストアを取得します。

    const transaction = db.transaction(storename, "readwrite");
    const store = transaction.objectStore(storename);

検索の場合は、インデックスオブジェクト( IDBIndex オブジェクト )を取得します。

    const index = store.index("price");

検索結果の変数を宣言します。検索はIDBIndexオブジェクトのopenCursor()メソッドを呼び出します。
引数に条件を与えます。下記のコードでは、IDBKeyRange.lowerBound(100) を記述し、100以上の値としています。 priceの値が100以上のレコードを検索します。

    const results = [];
    const cursorRequest = index.openCursor(IDBKeyRange.lowerBound(100));

検索ができると、openCursor メソッドの戻り値の IDBRequest オブジェクトのonsuccesイベントが発生し、以下のコードが実行されます。
IDBCursorオブジェクトのevent.target.resultの値をresultsに追加します。次の検索結果への移動は、IDBCursorオブジェクトのcontinue()メソッドを呼び出します。
最後のレコードに到達すると、cursorがnullとなるため、elseブロックのコードを実行し、ページに検索結果を表示します。

    cursorRequest.onsuccess = function (event) { 
      const cursor = event.target.result;
      if (cursor) {
        results.push(cursor.value);
        cursor.continue();
      } else {
        console.log("検索結果:", results);
        var elem = document.getElementById("output");
        results.forEach(function (data) {
          elem.innerHTML += data.id + ", " + data.name + ", " + data.price + "<br/>";
        });
      }
    };

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
IndexedDBからレコード (データ)を検索するコードと実行結果:画像7

[OpenDatabase]リンクをクリックします。

オブジェクトストアの作成とデータベースのオープンが実行されます。

[InsertData]リンクをクリックしてデータをデータベースに挿入します。
IndexedDBからレコード (データ)を検索するコードと実行結果:画像11

[SelectData]リンクをクリックします。

リンクをクリックすると検索結果がページ下部に表示されます。priceの値が100以上の値のレコードが表示されます。