IndexedDB1系と2系の違いについて
IndexedDBはまだ普及していると言える段階にはありませんが、それでも開発者のフィードバックを受けてバージョンアップが行われています。最新のブラウザで実装されているのは IndexedDB2系になります。
今回は1系と2系で何が変わったのかを紹介します。
オブジェクトストアとインデックス名を変更できるようになった
db.objectStore であったり、 objectStore.index で作成済みのオブジェクトを取得し、nameメソッドで名前を変えられるようになりました。これは構造変更を伴うので、 onupgradeneeded の中で行う必要があります。
| let db; | |
| let version = 2; | |
| const request = indexedDB.open("database", version); | |
| request.onerror = function(event) { | |
| alert("IndexedDB が使えません"); | |
| }; | |
| request.onupgradeneeded = function(event) { | |
| let txn = event.target.transaction; | |
| debugger; | |
| const objectStore = txn.objectStore("items", { keyPath: "id" }); | |
| objectStore.name = 'products'; | |
| const index = objectStore.index('name'); | |
| index.name = 'title'; | |
| }; | |
| request.onsuccess = function(event) { | |
| db = event.target.result; | |
| } |
クローズ時のイベントが追加
IndexedDBを閉じた時にoncloseイベントが発火するようになりました。が、筆者環境で試す限りコールされませんでした。
| let db; | |
| let version = 2; | |
| const request = indexedDB.open("database", version); | |
| request.onerror = function(event) { | |
| alert("IndexedDB が使えません"); | |
| }; | |
| request.onsuccess = function(event) { | |
| db = event.target.result; | |
| db.onclose = function(event) { | |
| console.log('IndexeDBを閉じました'); | |
| } | |
| } |
バイナリインデックス対応
インデックスは文字列や数字だけでしたが、ArrayBufferやDataViewなどもインデックスに指定できるようになりました。
トランザクションに objectStoreNames メソッドが追加
トランザクションに、対象となっているオブジェクトストアを一覧する objectStoreNames が追加されました。通常のトランザクションであれば指定したオブジェクトストアの一覧、IndexedDBのバージョンが変わった場合には全オブジェクトストアの一覧が返ってきます。
| let db; | |
| let version = 4; | |
| const request = indexedDB.open("database", version); | |
| request.onerror = function(event) { | |
| alert("IndexedDB が使えません"); | |
| }; | |
| request.onupgradeneeded = function(event) { | |
| db = event.target.result; | |
| let txn = event.target.transaction; | |
| console.log(txn.objectStoreNames); | |
| // -> DOMStringList {0: "items", 1: "products", length: 2} | |
| }; |
getAll/getAllKeysの追加
対象になっているオブジェクトストアで全データを取得するgetAllと、全データのキーを取得するgetAllKeysが追加されました。
IDBKeyRange.includes の追加
IndexedDBでデータを絞り込む際に使う IDBKeyRange で、ある値が対象範囲にあるかどうかを判定する IDBKeyRange.includes が追加されました。
| let openRange = IDBKeyRange.bound(5, 10, true, true); | |
| openRange.includes(5); // false | |
| openRange.includes(10); // false | |
| openRange.includes(7); // true |
これは数値に限らず利用できます。
| today = new Date; | |
| weekago = new Date - 24 * 1000 * 60 * 60 * 7; | |
| openRange = IDBKeyRange.bound(weekago, today, true, true); | |
| openRange.includes(today); // false | |
| openRange.includes(new Date(today - 1)); // true | |
| openRange.includes(weekago); // false | |
| openRange.includes(new Date(weekago - 1 + 2)); // true |
まとめ
IndexeDB 1系はEdge/IE11でも利用できます（IE11ではサポート対象外であったり、EdgetではWeb Workersの中では動かないという制限もあります）。IndexedDB 2 についてはIE/Edgeともに利用できません。実際に利用する際には、こういった点にも注意して使う必要があるでしょう。
コメントは受け付けていません。