JavaScript
indexedDB

IndexedDBの使い方

IndexedDBを使うと、ブラウザ内にWebStorageより大量のデータを保存できます。

ただし、ブラウザのプライバシーモードでは使えない場合があります。

2019年1月現在、主要ブラウザでプライバシーモードでも使えるのはChromeのみです。(ブラウザ実装状況)

IE11では、ローカルにファイルを置いてfile://urlにアクセスしても使えませんが、webサーバー上に置けば使えます。

IndexedDBを扱う処理は非同期です。

データベースへの接続やデータの挿入、取得などのリクエストが、成功したときにはonsuccess、失敗した時にはonerrorが呼び出されます。


データベース新規作成・接続

var dbName = 'sampleDB';

var openReq = indexedDB.open(dbName);
// DB名を指定して接続。DBがなければ新規作成される。

openReq.onupgradeneeded = function(event){
//onupgradeneededは、DBのバージョン更新(DBの新規作成も含む)時のみ実行
console.log('db upgrade');
}
openReq.onsuccess = function(event){
//onupgradeneededの後に実行。更新がない場合はこれだけ実行
console.log('db open success');
var db = event.target.result;
// 接続を解除する
db.close();
}
openReq.onerror = function(event){
// 接続に失敗
console.log('db open error');
}

db.close()しないままでも、indexedDB.open(dbName)はできる。

しかし、DBの更新や削除は、closeしてからでないとできない(onupgradeneeded, onsuccess, onerrorのどれも実行されない)。


データベース削除

var deleteReq = indexedDB.deleteDatabase(dbName);

deleteReq.onsuccess = function(event){
console.log('db delete success');
// 存在しないDB名を指定してもこっちが実行される
}

deleteReq.onerror = function(){
console.log('db delete error');
}


オブジェクトストア作成

オブジェクトストアは、RDBでいうテーブル。

var storeName  = 'sampleStore';

var openReq = indexedDB.open(dbName, dbVersion);
// オブジェクトストアの作成・削除はDBの更新時しかできないので、バージョンを指定して更新

openReq.onupgradeneeded = function(event){
var db = event.target.result;
db.createObjectStore('storeName', {keyPath : 'id'})
}

オブジェクトストアの作成、削除はDBの更新時に実行されるonupgradeneededの中でしかできない。

DBの新規作成時以外でDBを更新するには、open()のときにDBの新しいバージョンを指定する。

現在のバージョンは、以下のように取得できる。

var dbVersion;

openReq.onsuccess = function(event){
var db = event.target.result;
dbVersion = db.version;
}


データ挿入

var data = {id : 'A1', name : 'test'};

var openReq = indexedDB.open(dbName);

openReq.onsuccess = function(event){
var db = event.target.result;
var trans = db.transaction(storeName, 'readwrite');
var store = trans.objectStore(storeName);
var putReq = store.put(data);

putReq.onsuccess = function(){
console.log('put data success');
}

trans.oncomplete = function(){
// トランザクション完了時(putReq.onsuccessの後)に実行
console.log('transaction complete');
}

}

putの他にaddもある。putはデータの挿入または更新で、addは挿入だけ。keyの値が重複したデータをaddしようとするとエラーになるが、putでは上書きする。


データ取得

var keyValue = 'A1';

var openReq = indexedDB.open(dbName);

openReq.onsuccess = function(event){
var db = event.target.result;
var trans = db.transaction(storeName, 'readonly');
var store = trans.objectStore(storeName);
var getReq = store.get(keyValue);

getReq.onsuccess = function(event){
console.log(event.target.result); // {id : 'A1', name : 'test'}
}
}

そのままだと使いにくいと思われる方は、dexie.jsなどのラッパーも用意されているので試してみるといいかもしれません。