IndexedDBにデータを挿入するコードと実行結果を紹介します。
IndexedDBのデータを挿入する場合は、オブジェクトストアのAddメソッドを呼び出してデータを挿入します。
(IDBObjectStore).add([挿入するオブジェクト]);
以下の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: 45800 });
store.add({ id: 2, name: "おおきなダイニングテーブル", price: 1648000 });
store.add({ id: 3, name: "おしゃれなスタンド", price: 28500 });
store.add({ id: 4, name: "ふかふかソファー", price: 87200 });
store.add({ id: 5, name: "小さなコーヒーテーブル", price: 16500 });
store.add({ id: 6, name: "ハードなベッド", price: 122500 });
transaction.oncomplete = function () {
alert("データベースにレコードを挿入しました。");
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 InsertData テストページ</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>
IndexedDBを開いてオブジェクトストアを作成するコードについてはこちらの記事を参照してください。
2番目の[InsertData]のリンクをクリックするとオブジェクトストアにデータを挿入する以下の関数を呼び出して実行します。
はじめにトランザクションオブジェクト(IDBTransaction オブジェクト)とオブジェクトストア(IDBObjectStore オブジェクト)を取得します。
IDBObjectStore オブジェクトのaddメソッドを呼び出してデータを挿入します。
function InsertData() {
// トランザクションとオブジェクトストアの取得
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
// データの追加
store.add({ id: 1, name: "リラックスチェア", price: 45800 });
store.add({ id: 2, name: "おおきなダイニングテーブル", price: 1648000 });
store.add({ id: 3, name: "おしゃれなスタンド", price: 28500 });
store.add({ id: 4, name: "ふかふかソファー", price: 87200 });
store.add({ id: 5, name: "小さなコーヒーテーブル", price: 16500 });
store.add({ id: 6, name: "ハードなベッド", price: 122500 });
transaction.oncomplete = function () {
alert("データベースにレコードを挿入しました。");
console.log("データベースにレコードを挿入しました。");
};
}
データが挿入されたかの結果はすべてのレコードを取得して確認します。
レコードの取得についてはこちらの記事を参照してください。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[OpenDatabase]のリンクをクリックします。オブジェクトストアの作成とデータベースのオープンが実行されます。
[InsertData]のリンクをクリックします。データが挿入された旨のアラートダイアログが表示されます。
[SelectAllData]リンクをクリックすると挿入したデータがページに表示され、データベースにデータが挿入されたことが確認できます。
