Magicode logo
Magicode
0

IndexedDBの(少し詳しい)サンプルコード

IndexedDBは検索すればすぐにサンプルコードが出てきますが、一部不明瞭な点があるのでそれを補完したサンプルコードです。

IndexedDBとは

(大量の)オブジェクトを格納するためのHTML5アプリで使えるデータベースです。

サンプルコード

indexedDB.open("<DBの名前>", <バージョン>)で"archives"という名前のDBを開いています(存在しない場合は新規作成が行われます)。2番目の引数はバージョンで、DBの構造を変える場合などは変更し、次のidbReq.onupgradeneededが実行されるようにします。

idbReq.onupgradeneededはDBの新規作成時またはバージョン変更時に1回だけ実行される関数で、DBの構造自体の変更が行えます。たとえばオブジェクトストア(RDBで言えばテーブルに当たる)の作成などです。 ここではtwitterとpocketのデータを保存するためdb.createObjectStoreで"twitter","pocket"の二つのオブジェクトストアを作成しています。2番目の引数{ keyPath: "id_str" }は格納するjsonオブジェクトのどの項目を「キー」(RDBで言えばプライマリーキーに当たる)と見なすかを表しています。

よくあるサンプルコードではdb.transaction()transaction.objectStore()の引数が同じでこの二つの関数の違いが良くわからないんですが、db.transaction()ではどのオブジェクトストアを使うのかを(配列で)示し、transaction.objectStore()で指定したオブジェクトストアを取り出すという形になっています。 上の例では二つのオブジェクトストアから全てのデータを取り出しコンソールに出力しています。

トランザクションの連続性について

Indexeddbのトランザクションは関数の連続した流れが途切れたところで自動的に終了します。たとえば次のように非同期のコールバックがある場合トランザクションは連続しません。

この場合以下のようにコールバック内部で再度トランザクションを取得する必要があります。

参考リンク: How do you keep an indexeddb transaction alive? - Stack Overflow

その他

さらに詳しい内容は検索するか以下のページなどを参考にしてください

Discussion

コメントにはログインが必要です。