IndexDBのデータベースを開き、データを挿入して検索する一連のシンプルなデータベース操作のコードと実行結果を紹介します。
以下の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: 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 SelectData() {
const transaction = db.transaction(storename, "readonly");
const store = transaction.objectStore(storename);
const getRequest = store.get(3);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("レコード取得成功:", getRequest.result);
var elem = document.getElementById("output");
elem.innerHTML += getRequest.result.id + ", " + getRequest.result.name + ", " + getRequest.result.price + "<br/>";
} else {
console.log("指定された ID のレコードが見つかりませんでした。");
}
};
}
</script>
</head>
<body>
<h2>openDatabase テストページ</h2>
<a href="javascript:OpenMyDatabase();">OpenDatabase</a><br>
<a href="javascript:InsertData();">InsertData</a><br>
<a href="javascript:SelectData();">SelectData</a><br>
<hr>
<div id="output"></div>
</body>
</html>
ページの最初のリンクをクリックすると以下のOpenMyDatabase()関数を呼び出し、
データベースを開き、オブジェクトストアを作成します。
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);
};
}
ページの2番目のリンクをクリックすると。トランザクションとオブジェクトストアを取得し、データを追加します。
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("データベースにレコードを挿入しました。");
};
}
3番目のリンクをクリックすると、トランザクションとオブジェクトストアを取得し、データを検索します。
検索はオブジェクトストア作成時に指定した{ keyPath: "id" } により、idの値で検索します。
検索出来た場合は、onsuccessイベントが呼び出されます。今回のコードでは、id="output"の要素にデータの値を表示します。
function SelectData() {
const transaction = db.transaction(storename, "readonly");
const store = transaction.objectStore(storename);
const getRequest = store.get(3);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("レコード取得成功:", getRequest.result);
var elem = document.getElementById("output");
elem.innerHTML += getRequest.result.id + ", " + getRequest.result.name + ", " + getRequest.result.price + "<br/>";
} else {
console.log("指定された ID のレコードが見つかりませんでした。");
}
};
}
上記のHTMLをWebブラウザで開きます。下図のページが表示されます。
[OpenDatabase]のリンクをクリックします。オブジェクトストアを作成した旨のアラートダイアログが表示されます。
続いて[InsertData]リンクをクリックします。クリックするとデータがオブジェクトストアに挿入されます。
データ挿入後に[SelectData]リンクをクリックします。
検索が実行され、id=3 の要素の値 id=3 name="らくだキャラメル" price=90 の値がページに表示されます。
IndexDBのデータベースを開き、データを挿入して検索する一連のシンプルな動作を実装できました。
