IndexedDBのデータを削除するコードと実行結果を紹介します。
IndexedDBのデータを更新する場合は、オブジェクトストアのdeleteメソッドを呼び出してデータを削除します。
(IDBObjectStore).delete([削除するオブジェクトのID]);
以下の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 DeleteData() {
// トランザクションとオブジェクトストアの取得
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
// 削除する
const deleteRequest = store.delete(4); // ここではIDが4のレコードを削除
deleteRequest.onsuccess = function () {
console.log("データを削除しました。");
alert("データを削除しました。");
};
deleteRequest.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 DeleteData テストページ</h2>
<a href="javascript:OpenMyDatabase();">OpenDatabase</a><br>
<a href="javascript:InsertData();">InsertData</a><br>
<a href="javascript:DeleteData();">DeleteData</a><br>
<a href="javascript:SelectAllData();">SelectAllData</a><br>
<hr>
<div id="output"></div>
</body>
</html>
レコードの削除部分は以下のコードになります。
function DeleteData() {
// トランザクションとオブジェクトストアの取得
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
// 削除する
const deleteRequest = store.delete(4); // ここではIDが4のレコードを削除
deleteRequest.onsuccess = function () {
console.log("データを削除しました。");
alert("データを削除しました。");
};
deleteRequest.onerror = function (event) {
console.error("データの削除に失敗しました:", event.target.error);
};
}
はじめに、トランザクションオブジェクトとオブジェクトストアを取得します。
const transaction = db.transaction(storename, "readwrite");
const store = transaction.objectStore(storename);
レコードを削除します。今回はid=4のオブジェクトを取得します。
const deleteRequest = store.delete(4);
レコードが削除できると、IDBRequestのonsuccessイベントが実行され、以下のコードが実行されます。
削除された旨のメッセージをダイアログで表示します。
deleteRequest.onsuccess = function () {
console.log("データを削除しました。");
alert("データを削除しました。");
};
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[OpenDatabase]のリンクをクリックします。オブジェクトストアが作成され、データベースがオープンされます。
[InsertData]のリンクをクリックします。データベースにデータが挿入されます。
[SelectAllData]のリンクをクリックします。挿入されたデータがページに表示されます。
ページを再度表示します。[OpenDatabase]のリンクをクリックします。
データベースがオープンされた旨のメッセージが表示されます。
[DeleteData]のリンクをクリックします。データが削除された旨のダイアログが表示されます。
[SelecaAllData]のリンクをクリックします。
データが表示されます。id=4の「ふかふかソファー」は表示されず、データが削除されたことが確認できます。
IndexedDBからデータを削除できました。
