IndexedDBでデータをまとめて取得するには？

IndexedDBはWebブラウザ上で使えるJSONをサポートしたKVSです。KVSなのでデータの取得はキー単位なのですが、それだとキーを知らないとデータにアクセスできなくなりますので若干不便です。

そこで使えるのがカーソルとインデックスになります。

カーソルの使い方

カーソルはオブジェクトストアに対して openCursor メソッドで実行します。まず IndexedDB を開きます。

次にトランザクションを開き、オブジェクトストアに対して openCursor メソッドを実行します。 データはイテレーションになっており、 continue メソッドで次のデータを取得します。

すべてのデータを取得する getAll

IndexedDB2 からは全データをまとめて取得する getAll メソッドが追加されました。こちらはイテレーションではなく、すべてのデータが配列になって取得できます。大量のデータではない時にはこちらのが簡単でしょう。同じようにキーだけを取得できる getAllKeys メソッドも用意されています。

インデックスを使う

データに対してインデックスを設けている場合には、それを使ってデータを指定できます。データがnameをキーにして昇順で取得できます（0が最初）。

こちらもまた、getAllや getAllKeysが使えます。

まとめ

IndexedDBはあくまでもWebブラウザ内で使う軽量なデータベースになりますので、大量のデータを保存していることはほとんどないでしょう。そのため、openCursorを使って全データを取得したとしても遅くなるようなことはないかと思います。

なお、getAll や getAllKeysはIndexedDB2 からになり、執筆時点ではEdgeは未対応になります。

IndexedDB を使用する – Web API インターフェイス | MDN

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