IndexedDBでデータをまとめて取得するには？
IndexedDBはWebブラウザ上で使えるJSONをサポートしたKVSです。KVSなのでデータの取得はキー単位なのですが、それだとキーを知らないとデータにアクセスできなくなりますので若干不便です。
そこで使えるのがカーソルとインデックスになります。
カーソルの使い方
カーソルはオブジェクトストアに対して openCursor メソッドで実行します。まず IndexedDB を開きます。
| let db; | |
| let version = 1; | |
| const request = indexedDB.open("database", version); | |
| request.onerror = function(event) { | |
| alert("IndexedDB が使えません"); | |
| }; | |
| request.onsuccess = function(event) { | |
| db = event.target.result; | |
| } |
次にトランザクションを開き、オブジェクトストアに対して openCursor メソッドを実行します。 データはイテレーションになっており、 continue メソッドで次のデータを取得します。
| const transaction = db.transaction(["items"]); | |
| const objItem = transaction.objectStore("items"); | |
| objItem.openCursor().onsuccess = function(event) { | |
| const row = event.target.result; | |
| if (row) { | |
| console.log(row.value); | |
| row.continue(); | |
| } | |
| } |
すべてのデータを取得する getAll
IndexedDB2 からは全データをまとめて取得する getAll メソッドが追加されました。こちらはイテレーションではなく、すべてのデータが配列になって取得できます。大量のデータではない時にはこちらのが簡単でしょう。同じようにキーだけを取得できる getAllKeys メソッドも用意されています。
| const transaction = db.transaction(["items"]); | |
| const objItem = transaction.objectStore("items"); | |
| objItem.getAll().onsuccess = function(event) { | |
| const rows = event.target.result; | |
| console.log(rows); | |
| } |
インデックスを使う
データに対してインデックスを設けている場合には、それを使ってデータを指定できます。データがnameをキーにして昇順で取得できます（0が最初）。
| const transaction = db.transaction(["items"]); | |
| const objItem = transaction.objectStore("items"); | |
| const Index = objItem.index('name'); | |
| Index.openCursor().onsuccess = function(event) { | |
| const row = event.target.result; | |
| if (row) { | |
| console.log(row.value); | |
| row.continue(); | |
| } | |
| } |
こちらもまた、getAllや getAllKeysが使えます。
まとめ
IndexedDBはあくまでもWebブラウザ内で使う軽量なデータベースになりますので、大量のデータを保存していることはほとんどないでしょう。そのため、openCursorを使って全データを取得したとしても遅くなるようなことはないかと思います。
なお、getAll や getAllKeysはIndexedDB2 からになり、執筆時点ではEdgeは未対応になります。
コメントは受け付けていません。