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

2025/01/18

[PR]

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

2021/06/02

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

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

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

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

<パラメータ>
・id：キー文字列またはキーの範囲指定

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

get メソッドが成功した時には event.target.result にデータが返るので、ここで行いたい処理を記述します。
以下に簡単な get メソッドの利用ソースを示します。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - add - 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 getData() {
	//キー値
	var id = $("#id").val();
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readonly');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//一件取得
	var request = objectStore.get(id);
	//取得が成功した場合の関数宣言
	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 - add - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	 id:<input type="text" name="id"   id="id" value="" />
	<button id="buttonGet"  onclick="getData()">データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後 ID のテキストボックスに「01」を入力し「データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにデータが表示されるのが分かります（下図参照）。

そこで ID のテキストボックスをクリアし「データ取得」ボタンをクリックすると、コンソールに undefined と表示されます。また「111」などのキーが存在しないで「データ取得」ボタンをクリックしても同様に undefined と表示されます。

データが undefined の判定処理を onsuccess イベントに追加して undefined では無い場合にデータ処理を行う様に変更します。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - get - 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 getData() {
	//キー値
	var id = $("#id").val();
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readonly');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//一件取得
	var request = objectStore.get(id);
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;
		if (result !== undefined) {
			console.log('データ:', result);
		} else {
			console.log('データが見つからない!!');
		}
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - get - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	 id:<input type="text" name="id"   id="id" value="" />
	<button id="buttonGet"  onclick="getData()">データ取得</button>
    <br />
</body>
</html>

VB.NET-TIPS などプログラミングについて

関連する記事

コメント