Help us understand the problem. What is going on with this article?

IndexedDBの使い方

More than 1 year has passed since last update.

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などのラッパーも用意されているので試してみるといいかもしれません。

butakoma
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした