JavaScript IndexedDB の使い方４（全データ取得）｜VB.NET-TIPS などプログラミングについて

2025/01/18

[PR]

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

2021/06/03

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

全データを取得する場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの getAll メソッドで全データ取得のリクエストを行います。

getAll メソッドの書式とイベント関数の定義は以下の様になります。

// getメソッド（objectStore：「オブジェクトストア」オブジェクト）
var request = objectStore.getAll( [query , [count] ] );
request.onsuccess = function(event) {
	// 取得が成功した場合の関数宣言（event.target.result にデータの配列が返る）
};
request.onerror = function(event) {
	// 取得エラーの場合の関数宣言
};

<パラメータ>
・query：キー文字列または IDBKeyRange オブジェクトのクエリー指定
・count：返されるデータの数の指定

<戻り値>
request ：IDBRequest オブジェクト

getAll メソッドが成功した時には event.target.result にデータの配列が返るので、ここで行いたい処理を記述します。
尚、1件のみのデータ取得の get メソッドとは異なりデータの配列が返されるので注意が必要です。

■簡単な getAll メソッドの利用

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - allget - 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.getAll();
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;	// データ配列が返る!!
		console.log('データ:', result);
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - allget - 1</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにArrayデータとしてレコードの内容が表示されるのが分かります（下図参照）。

上の例では getAll メソッドの引数を指定していないので「オブジェクトストア」内の全データが返されます。

■getAll メソッドにキー範囲とデータ件数の指定

そこで getAll メソッドにキー範囲とデータ件数の指定を行い、結果を見てみます。
キー範囲は IDBKeyRange オブジェクトを使います。以下の例ではキーが '01' ～ '22' の範囲で、データ件数は4件を指定しています。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - allget - 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.getAll(query, 4);	//キーの範囲指定、データ数４件
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;	// ４件のデータ配列が返る!!
		console.log('データ:', result);
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - allget - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonGet"  onclick="getAllData()">全データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにArrayデータとして４件のレコードの内容が表示されるのが分かります（下図参照）。

■キーが存在しないキー範囲指定

ここでキー範囲指定オブジェクトで以下の様に、キーが存在しない設定にすると、結果として０件のデータ配列が返されますので、注意が必要です。

// [getAllData]関数のみ抜粋、その他は変更なし
function getAllData() {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readonly');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//キーの範囲指定オブジェクト
	var query = IDBKeyRange.bound('05', '07');	//キー範囲:'05'～'07'
	//データ取得
	var request = objectStore.getAll(query, 4);	//キーの範囲指定、データ数４件
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;	// ０件のデータ配列が返る!!
		console.log('データ:', result);
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}

「DBオープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールに０件のArrayデータとして表示されるのが分かります（下図参照）。

■キー範囲 IDBKeyRange オブジェクト

IDBKeyRange オブジェクトにはキー範囲を生成する bound , lowerBound , upperBound , only のメソッドがあります。 IDBKeyRange.bound は抽出するキー範囲を指定し、IDBKeyRange.lowerBound は指定キーより大きいか、以上のものを対象とし、 IDBKeyRange.upperBound は指定キーより小さいか、以下のものを対象とします。
また、IDBKeyRange.only は指定キーそのものが対象となります。

コード	キー範囲	備考
IDBKeyRange.lowerBound(X)	[全キー]　≧　(X)	(X) 以上のキーが対象
IDBKeyRange.lowerBound(X, true)	[全キー]　＞　(X)	(X) より大きいキーが対象
IDBKeyRange.upperBound(Y)	[全キー]　≦　(Y)	(Y) 以下のキーが対象
IDBKeyRange.upperBound(Y, true)	[全キー]　＜　(Y)	(Y) より小さいキーが対象
IDBKeyRange.bound(X, Y)	(X)　≦　[全キー]　≦　(Y)	(X) 以上かつ (Y) 以下のキーが対象
IDBKeyRange.bound(X, Y, true, true)	(X)　＜　[全キー]　＜　(Y)	(X) より大きくかつ (Y) より小さいキーが対象
IDBKeyRange.bound(X, Y, true, false)	(X)　＜　[全キー]　≦　(Y)	(X) より大きくかつ (Y) 以下のキーが対象
IDBKeyRange.bound(X, Y, false, true)	(X)　≦　[全キー]　＜　(Y)	(X) 以上かつ (Y) より小さいキーが対象
IDBKeyRange.only(Z)	[キー]　＝　(Z)	キーが (Z) のものが対象

■その他注意点

今回の getAll メソッドは Internet Explorer では実装されていません。
Edge には実装されていますが Internet Explorer で全データの取得を行う場合は、カーソル処理で行う必要があります。 (2022年には IE のサポートを終了するというアナウンスが Microsoft からあったので、これからは IE をそこまで気にしなくても良くなりそうですが)

なお、カーソル処理については次の記事で紹介したいと思います。