今回はカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明します。
カーソル処理を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、 「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの openCursor メソッドでカーソルオープンのリクエストを行います。
openCursor メソッドの書式とイベント関数の定義は以下の様になります。 (尚 openCursor の引数のキー範囲指定は getAll と同様です。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // openCursorメソッド(objectStore:「オブジェクトストア」オブジェクト) var request = objectStore.openCursor( [query , [direction] ] ); request.onsuccess = function (event) { // 取得が成功した場合の関数宣言(event.target.result にカーソルデータが返る) var cursor = event.target.result; //取敢えず変数で受ける(cursor.value でデータが参照できる) }; request.onerror = function (event) { // 取得エラーの場合の関数宣言 }; <パラメータ> ・query:キー文字列または IDBKeyRange オブジェクトのクエリー指定 ・direction:カーソル移動の指定( "next" , "nextunique" , "prev" , "prevunique" を指定) "next" :キー昇順(デフォルト) "nextunique" :キー昇順で重複キーは最初のデータを取得 "prev" :キー降順 "prevunique" :キー降順で重複キーは最初のデータを取得 <戻り値> request :IDBRequest オブジェクト |
openCursor メソッドが成功した時には event.target.result にカーソルオブジェクトが返ります。
このカーソルオブジェクトが「null」では無い場合、その中の「value」に実際のデータが入っています。
引き続き次のデータを取得したい場合には、カーソルオブジェクトの continue メソッドを行います。
次のデータが存在すれば、再度この onsuccess イベントが発生します。順次処理が進めば、指定の全てのデータの処理が行えます。
カーソルオブジェクトが「null」の場合は指定されたキー範囲(引数が無ければ全データが対象ですが)の全てのデータの取得が終わったことを示します。
■簡単な openCursor メソッドとカーソルオブジェクトの continue メソッドの利用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <html> <head> <meta charset= "utf-8" > <title>test IndexedDB - cursor - 1</title> <script type= "text/javascript" > // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB" ; // オブジェクトストア名 var objStoreName = "Test1" ; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function (event) { //データベースインスタンス保存 db = event.target.result; console.log( "DBオープンOK" ); }; //エラーの場合の関数宣言 request.onerror = function (event){ console.log( "DBオープンエラー" ); }; } /** * 全データ取得処理 */ function getAllData() { //トランザクション var transaction = db.transaction(objStoreName, 'readonly' ); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //カーソル開始 var request = objectStore.openCursor(); //カーソルで対応するデータが存在した場合の処理 request.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log( 'データ:' , cursor.value); //次のカーソルへ cursor. continue (); } else { //これ以上のデータは存在しない console.log( 'データ終了' ); } }; //カーソル取得エラーの場合の関数宣言 request.onerror = function (event) { console.log( '取得失敗。event:' , event); }; } </script> </head> <body> <h2>test IndexedDB - cursor - 1</h2> <button id= "buttonOpen" onclick= "openDB()" >DBオープン</button> <button id= "buttonGet" onclick= "getAllData()" >全データ取得</button> <br /> </body> </html> |
「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールに順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。
上の例では openCursor メソッドの引数を指定していないので「オブジェクトストア」内の全データが返されます。
■openCursor メソッドにキー範囲とカーソル移動方向("next":昇順)の指定
getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を昇順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ~ '22' の範囲指定で、カーソル移動方向は 'next' を指定しています。 ('next' はデフォルトなので指定しなくても 'next' になります。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <html> <head> <meta charset= "utf-8" > <title>test IndexedDB - cursor - 2</title> <script type= "text/javascript" > // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB" ; // オブジェクトストア名 var objStoreName = "Test1" ; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function (event) { //データベースインスタンス保存 db = event.target.result; console.log( "DBオープンOK" ); }; //エラーの場合の関数宣言 request.onerror = function (event){ console.log( "DBオープンエラー" ); }; } /** * 全データ取得処理 */ function getAllData() { //トランザクション var transaction = db.transaction(objStoreName, 'readonly' ); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //キーの範囲指定オブジェクト var query = IDBKeyRange.bound( '01' , '22' ); //キー範囲:'01'~'22' //カーソル開始 var request = objectStore.openCursor(query, 'next' ); //キーの範囲指定、カーソル移動方向指定 //カーソルで対応するデータが存在した場合の処理 request.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log( 'データ:' , cursor.value); //次のカーソルへ cursor. continue (); } else { //これ以上のデータは存在しない console.log( 'データ終了' ); } }; //カーソル取得エラーの場合の関数宣言 request.onerror = function (event) { console.log( '取得失敗。event:' , event); }; } </script> </head> <body> <h2>test IndexedDB - cursor - 2</h2> <button id= "buttonOpen" onclick= "openDB()" >DBオープン</button> <button id= "buttonGet" onclick= "getAllData()" >全データ取得</button> <br /> </body> </html> |
「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールににキーの昇順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。
■openCursor メソッドにキー範囲とカーソル移動方向("prev":降順)の指定
getAll メソッドの時と同様に openCursor メソッドにキー範囲指定、およびカーソル移動方向を降順指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ~ '22' の範囲指定で、カーソル移動方向は 'prev' を指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <html> <head> <meta charset= "utf-8" > <title>test IndexedDB - cursor - 3</title> <script type= "text/javascript" > // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB" ; // オブジェクトストア名 var objStoreName = "Test1" ; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function (event) { //データベースインスタンス保存 db = event.target.result; console.log( "DBオープンOK" ); }; //エラーの場合の関数宣言 request.onerror = function (event){ console.log( "DBオープンエラー" ); }; } /** * 全データ取得処理 */ function getAllData() { //トランザクション var transaction = db.transaction(objStoreName, 'readonly' ); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //キーの範囲指定オブジェクト var query = IDBKeyRange.bound( '01' , '22' ); //キー範囲:'01'~'22' //カーソル開始 var request = objectStore.openCursor(query, 'prev' ); //キーの範囲指定、カーソル移動方向指定 //カーソルで対応するデータが存在した場合の処理 request.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log( 'データ:' , cursor.value); //次のカーソルへ cursor. continue (); } else { //これ以上のデータは存在しない console.log( 'データ終了' ); } }; //カーソル取得エラーの場合の関数宣言 request.onerror = function (event) { console.log( '取得失敗。event:' , event); }; } </script> </head> <body> <h2>test IndexedDB - cursor - 3</h2> <button id= "buttonOpen" onclick= "openDB()" >DBオープン</button> <button id= "buttonGet" onclick= "getAllData()" >全データ取得</button> <br /> </body> </html> |
「DBオープン」ボタンをクリック後 「全データ取得」ボタンをクリックすると、 ブラウザの「ウエブ開発ツール」のコンソールにキーの降順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります(下図参照)。
関連する記事
⇒JavaScript IndexedDB の使い方1(データベースオープン)⇒JavaScript IndexedDB の使い方2(データ追加)
⇒JavaScript IndexedDB の使い方3(データ取得)
⇒JavaScript IndexedDB の使い方4(全データ取得)
⇒JavaScript IndexedDB の使い方5(カーソル処理)
⇒JavaScript IndexedDB の使い方6(データ削除)
コメント