IndexedDBのデータを更新するコードと実行結果を紹介します。
IndexedDBのデータを更新する場合は、オブジェクトストアのputメソッドを呼び出してデータを更新します。
(IDBObjectStore).put([更新するオブジェクト]);
以下の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 () {
console.log("データベースにレコードを挿入しました。");
};
}
function UpdateData() {
// トランザクションとオブジェクトストアの取得
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
// 更新するデータの取得
const getRequest = store.get(3); // ここではIDが3のレコードを更新
getRequest.onsuccess = function (event) {
const data = event.target.result;
if (data) {
data.name = "北欧デザインのスタンド";
const updateRequest = store.put(data);
updateRequest.onsuccess = function () {
alert("データを更新しました。");
console.log("データを更新しました。");
};
updateRequest.onerror = function (event) {
console.error("データの更新に失敗しました:", event.target.error);
};
}
}
getRequest.onerror = function (event) {
console.error("データの取得に失敗しました:", event.target.error);
};
}
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:UpdateData();">UpdateData</a><br>
<a href="javascript:SelectAllData();">SelectAllData</a><br>
<hr>
<div id="output"></div>
</body>
</html>
レコードの更新部分は以下のコードになります。
function UpdateData() {
// トランザクションとオブジェクトストアの取得
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
// 更新するデータの取得
const getRequest = store.get(3); // ここではIDが3のレコードを更新
getRequest.onsuccess = function (event) {
const data = event.target.result;
if (data) {
data.name = "北欧デザインのスタンド";
const updateRequest = store.put(data);
updateRequest.onsuccess = function () {
alert("データを更新しました。");
console.log("データを更新しました。");
};
updateRequest.onerror = function (event) {
console.error("データの更新に失敗しました:", event.target.error);
};
}
}
getRequest.onerror = function (event) {
console.error("データの取得に失敗しました:", event.target.error);
};
}
はじめに、トランザクションオブジェクトとオブジェクトストアを取得します。
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
次に更新するレコードのオブジェクトを取得します。今回はid=3のオブジェクトを取得します。
const getRequest = store.get(3);
レコードが取得できたらレコードを更新します。
onsuccessイベント内で以下のコードを実行します。取得したオブジェクトの値を書き換え、 store.put()メソッドを呼び出してデータを更新します。
const data = event.target.result;
if (data) {
data.name = "北欧デザインのスタンド";
const updateRequest = store.put(data);
updateRequest.onsuccess = function () {
alert("データを更新しました。");
console.log("データを更新しました。");
};
updateRequest.onerror = function (event) {
console.error("データの更新に失敗しました:", event.target.error);
};
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[OpenDatabase]のリンクをクリックします。データベースをオープンした旨のダイアログが表示されます。
[InsertData]リンクをクリックします。データがデータベースに挿入されます。
[SelectAllData]のリンクをクリックします。
挿入されたレコードが表示されます。
ページを再表示します。[OpenDatabase]のリンクをクリックします。
データベースをオープンした旨のダイアログが表示されます。
[UpdateData]のリンクをクリックします。
データを更新した旨のアラートダイアログが表示されます。
[SelectAllData]のリンクをクリックします。
レコードが表示されます。id=3の項目が「おしゃれなスタンド」から「北欧デザインのスタンド」に変更されていることが確認できます。
データベースのデータの変更ができました。
