IndexedDBでデータをまとめて取得するには？
IndexedDBはWebブラウザ上で使えるJSONをサポートしたKVSです。KVSなのでデータの取得はキー単位なのですが、それだとキーを知らないとデータにアクセスできなくなりますので若干不便です。
そこで使えるのがカーソルとインデックスになります。
カーソルの使い方
カーソルはオブジェクトストアに対して openCursor メソッドで実行します。まず IndexedDB を開きます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 メソッドで次のデータを取得します。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 メソッドも用意されています。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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が最初）。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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は未対応になります。
コメントは受け付けていません。