IndexedDB のオブジェクトストアを作成、削除するコードと実行結果を紹介します。
こちらの記事ではIndexedDBのデータベースを開くコードを紹介しました。
この記事ではデータベースにデータを格納するオブジェクトストアを作成、削除するコードを紹介します。
オブジェクトストアはリレーショナルデータベースのテーブルと似た概念になります。
(IDBDatabase オブジェクト).createObjectStore([オブジェクトストア名], [オプションオブジェクト]);
オプションオブジェクトには以下の値が利用できます。
{ KeyPath: "[キー名]" }
[キー名]のプロパティをキーとして利用します。
{ autoincrement : true }
キーが自動的にインクリメントされます。
(IDBDatabase オブジェクト).deleteObjectStore([オブジェクトストア名]);
オブジェクトストアの削除は、onupgradeneeded イベント内でしかできないため、
データベースのバージョンを上げて、 indexedDB.open()メソッドを呼び出した際に発生する
onupgradeneededでdeleteObjectStoreを呼び出します。
以下の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);
};
}
</script>
</head>
<body>
<h2>IndexedDB データベースの削除 デモ</h2>
<a href="javascript:DeleteMyDatabase();">データベースを開いてオブジェクトストアを作成する</a><br>
</body>
</html>
indexedDB.open()メソッドを呼び出し、IDBOpenDBRequestオブジェクトを取得します。
IDBOpenDBRequest オブジェクトの onupgradeneeded イベントでオブジェクトのストア作成を実行します。~
db.objectStoreNames.contains(storename)により、すでにオブジェクトストアが作成されている場合は、
オブジェクトストアを作成しません。
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('オブジェクトストアを作成しました。');
}
};
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。ページ内のリンクをクリックします。
リンクをクリックすると、[オブジェクトストアを作成しました。]のダイアログが表示されます。
続いて[データベースをオープンしました。]のダイアログが表示されます。
なお、2回目のリンククリックでは、すでにオブジェクトストアが作成されているため、データベースをオープンした旨のダイアログのみが表示されます。
<!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 DeleteObjectStore() {
const request = indexedDB.open(dbname, 2);
request.onupgradeneeded = function (event) {
const db = event.target.result;
if (db.objectStoreNames.contains(storename)) {
db.deleteObjectStore(storename);
alert(`オブジェクトストア '${storename}' を削除しました`);
console.log(`オブジェクトストア '${storename}' を削除しました`);
}
};
}
</script>
</head>
<body>
<h2>IndexedDB オブジェクトストアの作成 デモ</h2>
<a href="javascript:OpenMyDatabase();">データベースを開いてオブジェクトストアを作成する</a><br>
<a href="javascript:DeleteObjectStore();">データベースを開いてオブジェクトストアを削除する</a><br>
</body>
</html>
[オブジェクトストアを削除する]のリンクをクリックすると以下の関数を呼び出します。
indexedDB.open(dbname, 2); を実行し、バージョン番号を上げてデータベースを開きます。
onupgradeneededイベントが発生しますので、イベント内で削除したいオブジェクトストアが存在するかを確認し、
存在する場合に削除します。
function DeleteObjectStore() {
const request = indexedDB.open(dbname, 2);
request.onupgradeneeded = function (event) {
const db = event.target.result;
if (db.objectStoreNames.contains(storename)) {
db.deleteObjectStore(storename);
alert(`オブジェクトストア '${storename}' を削除しました`);
console.log(`オブジェクトストア '${storename}' を削除しました`);
}
};
}
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
はじめにオブジェクトストアを作成します。[オブジェクトストアを作成する]のリンクをクリックします。
オブジェクトストアを作成した旨のアラートダイアログが表示されます。
オブジェクトストアを削除します。[オブジェクトストアを削除する]のリンクをクリックします。
オブジェクトストアを削除した旨のアラートダイアログが表示されます。
