Indexed db からすべてのレコードを検索して取得するコードと実行結果を紹介します。
Indexed db からすべてのレコードを取得する場合には、オブジェクトストアのgetAll() メソッドを呼び出します。
(リクエスト変数) = (オブジェクトストアのオブジェクト).getAll();
<!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 SelectAllData() {
const transaction = db.transaction(storename, "readonly");
const store = transaction.objectStore(storename);
const getAllRequest = store.getAll();
getAllRequest.onsuccess = function () {
if (getAllRequest.result) {
for (i = 0; i < getAllRequest.result.length;i++) {
console.log("レコード取得成功:", getAllRequest.result[i]);
var elem = document.getElementById("output");
elem.innerHTML += getAllRequest.result[i].id + ", " + getAllRequest.result[i].name + ", " + getAllRequest.result[i].price + "<br/>";
}
} else {
console.log("指定された ID のレコードが見つかりませんでした。");
}
};
}
</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();">SelectAllData</a><br>
<hr>
<div id="output"></div>
</body>
</html>
上記のHTMLファイルをWebブラウザで開きます。下図のページが表示されます。
[OpenDatabase]のリンクをクリックします。データベースをオープンした旨のアラートダイアログが表示されます。
[InsertData]のリンクをクリックします。データベースにデータが挿入されます。
[SelectAllData]のリンクをクリックします。
ページの下部にデータのレコード一覧が表示されました。
Indexed DBのすべてのレコードを取得できました。
