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>