コンテンツへスキップ
Tags

IndexedDB1系と2系の違いについて

by : 2018/06/20

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;
}

view raw

index.js

hosted with ❤ by GitHub

クローズ時のイベントが追加

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を閉じました');
}
}

view raw

index.js

hosted with ❤ by GitHub

バイナリインデックス対応

インデックスは文字列や数字だけでしたが、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}
};

view raw

index.js

hosted with ❤ by GitHub

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

view raw

index.js

hosted with ❤ by GitHub

これは数値に限らず利用できます。

 

 

 

 

 


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

view raw

index.js

hosted with ❤ by GitHub

まとめ

IndexeDB 1系はEdge/IE11でも利用できます（IE11ではサポート対象外であったり、EdgetではWeb Workersの中では動かないという制限もあります）。IndexedDB 2 についてはIE/Edgeともに利用できません。実際に利用する際には、こういった点にも注意して使う必要があるでしょう。

Can I use… Support tables for HTML5, CSS3, etc

From → HTML5

コメントは受け付けていません。

«
»