今回はカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明します。
カーソル処理を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、 「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの openCursor メソッドでカーソルオープンのリクエストを行います。
openCursor メソッドの書式とイベント関数の定義は以下の様になります。 （尚 openCursor の引数のキー範囲指定は getAll と同様です。）
// 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 メソッドの利用
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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' になります。)
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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' を指定しています。
<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - cursor - 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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 の使い方１（データベースオープン）⇒JavaScript IndexedDB の使い方２（データ追加）
⇒JavaScript IndexedDB の使い方３（データ取得）
⇒JavaScript IndexedDB の使い方４（全データ取得）
⇒JavaScript IndexedDB の使い方５（カーソル処理）
⇒JavaScript IndexedDB の使い方６（データ削除）
PR
コメント