JavaScript IndexedDB の使い方５（カーソル処理）｜VB.NET-TIPS などプログラミングについて

2025/01/18

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2021/06/04

今回はカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明します。

カーソル処理を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの 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オープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにキーの降順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります（下図参照）。