https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API
IndexedDB はファイルやblobデータも保存できる、クライアントサイドのAPI。勧告状態のW3C標準仕様である。
単純な少量のデータを扱うことを想定された Web Storage と比較して、複雑で多くのデータを扱うのに適している。
・IndexedDB は SQL ベースの RDBMSに似ている。
ただし、RDBMSが固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクトを持つ。(オブジェクト指向データベース)
・IndexedDB を扱う操作は非同期に実行される。
実行後に呼ばれるコールバック関数を引数として渡す。
・トランザクション単位で実行される
操作はすべてトランザクションを開始して行う。
ただしトランザクションは自動コミットであり、手動コミットはできません。
簡単なサンプル
<!DOCTYPE html>
<html>
<head>
<script>
var KEY = 1;
var _db;
document.addEventListener("DOMContentLoaded", () => {
var request = window.indexedDB.open("myDatabase", 1);
request.onupgradeneeded = ev => {
var db = ev.target.result;
db.createObjectStore("myStore", { keyPath: "key" });
};
request.onsuccess = ev => {
_db = ev.target.result;
};
document.querySelector("#btnSave").addEventListener("click", ev => {
var data = {
key : KEY,
value: document.querySelector("#txtData").value
};
_db.transaction("myStore", "readwrite").objectStore("myStore").put(data);
alert("save");
});
document.querySelector("#btnLoad").addEventListener("click", ev => {
_db.transaction("myStore").objectStore("myStore").get(KEY).onsuccess = ev => {
document.querySelector("#txtData").value = ev.target.result.value;
};
alert("load");
});
});
</script>
</head>
<body>
<input type="text" id="txtData">
<input type="button" id="btnSave" value="save">
<input type="button" id="btnLoad" value="load">
</body>
</html>
