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

2021/06/07

今回は「オブジェクトストア」のデータを削除する方法について説明します。

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

delete メソッドの書式とイベント関数の定義は以下の様になります。（尚 delete の引数のキー範囲指定は getAll と同様です。）

// deleteメソッド（objectStore：「オブジェクトストア」オブジェクト）
var request = objectStore.delete( key );
request.onsuccess = function(event) {
	// 削除が成功した場合の関数宣言
};
request.onerror = function(event) {
	// 削除エラーの場合の関数宣言
};

<パラメータ>
・key：キー文字列または IDBKeyRange オブジェクトのクエリー指定

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

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

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - delete - 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 delData() {
	//キー値
	var id = $("#id").val();
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//削除処理開始
	var request = objectStore.delete(id);
	request.onsuccess = function(event) {
		console.log('削除成功。');
	};
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - delete - 1</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	 id:<input type="text" name="id"   id="id" value="" />
	<button id="buttonDel"  onclick="delData()">データ削除</button>
    <br />
</body>
</html>

ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」を確認したものが下図です。

さてここでデータの削除を行ってみます。「DBオープン」ボタンをクリック後 IDテキストボックスに "01" を入力し「データ削除」ボタンをクリックすると「削除成功。」と表示されます。
その後、ブラウザの「ウエブ開発ツール」の「ストレージ」の「Indexed DB」⇒「TestDB」⇒「Test1」の再読込をを確認したものが下図です。 KEYが "01" のデータが存在せず "02" からの一覧表示になっています。

但し、既に存在しないキーで削除を行っても、エラーは発生しませんでした。

■delete メソッドにキー範囲の指定

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

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - delete - 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 delData() {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
    //キーの範囲指定オブジェクト
	var query = IDBKeyRange.bound('01', '22');  //キー範囲:'01'～'22'
 	//削除処理開始
	var request = objectStore.delete(query);
	request.onsuccess = function(event) {
		console.log('削除成功。');
	};
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - delete - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonDel"  onclick="delData()">データ削除</button>
    <br />
</body>
</html>

ブラウザの「ウエブ開発ツール」の「ストレージ」の表示で「Indexed DB」⇒「TestDB」⇒「Test1」のデータを全て手動で削除し、「JavaScript IndexedDB の使い方２（データ追加）」の最後の部分の６件のデータ生成で再度データを追加します。

その後、上記のHTMLソースをロードし、「DBオープン」ボタンをクリック後「データ削除」ボタンをクリックすると、キー範囲が '01' ～ '22' のデータが全て削除されていることが分かります（下図参照）。

■簡単な 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オープン」ボタンをクリック後「全データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにキーの降順で順次データレコードの内容が表示され、最後に「データ終了」が表示されるのが分かります（下図参照）。

■簡単な 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 をそこまで気にしなくても良くなりそうですが)

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

メソッド	処理	説明
add	データ追加	新規のデータをオブジェクトストアに追加する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
clear	全データ削除	オブジェクトストアの全データを削除する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
count	データ件数取得	件数検索にキーまたは、キーの範囲指定により件数取得する。キー(範囲)の指定が無ければ、オブジェクトストアの全件数を取得する。戻り値 IDBRequest の onsuccess イベントで件数取得する。
delete	データ指定削除	キーまたは、キーの範囲指定によりデータ削除する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
get	データ取得	キーの指定によりデータ取得する。戻り値 IDBRequest の onsuccess イベントでデータ取得する。
getAll	指定全データ取得	件数検索にキーまたは、キーの範囲指定によりデータ取得する。データ取得はカーソル処理を使って行う。
openCursor	カーソルオープン	件数検索にキーまたは、キーの範囲指定によりカーソルオープンする。戻り値 IDBRequest の onsuccess イベントでカーソル(event.target.result)が返される。カーソルの continue() メソッドで次のカーソルへ処理が移る。

■データ追加処理

IDBObjectStore の add メソッドを使ったデータ追加の例を以下に示します。

データベースオープン処理は、前回の記事とほぼ同じですが、データベース名、オブジェクトストア名は先頭の方で宣言する様にしています。
IDBObjectStore の add メソッドの引数にはデータのオブジェクトを渡しますが、オブジェクトストアの生成で指定した keyPath の要素名は必須です。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - add - 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);
	//DBが存在しない場合、またはバージョン引数よりも小さい場合の作成処理
	request.onupgradeneeded = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		db.onerror = function(event) { 	//エラー処理
			console.log('DBの作成に失敗しました。');
		};

		//オブジェクトストア名の確認
		if (!db.objectStoreNames.contains(objStoreName)) {
			//オブジェクトストアが無い場合
			var objStoreKey = { keyPath: 'id' };	//キー設定
			//var objStoreKey = { autoIncrement: true };	//autoIncrementのみ指定
			//オブジェクトストア生成
			var obj = db.createObjectStore(objStoreName, objStoreKey);
			console.log("オブジェクトストア生成");
		}
	};
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ追加処理
 */
function addData() {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//オブジェクトストアに追加のリクエストします。
	var data = {
				 id: '01' , 		//キーデータ
				 data1: 'abcde' , 	//文字列データ
				 data2: 123 ,		//数値データ
				 data3: { data3_1: '001', data3_2: 1000 }	//オブジェクトデータ
			   };
	var request = objectStore.add(data);
	//追加正常の場合の関数宣言
	request.onsuccess = function(event) {
		console.log('保存成功');
	};
	//追加エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('保存失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - add - 1</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonAdd"  onclick="addData()">データ追加</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「データ追加」ボタンをクリックすると、データベース「TestDB」の中にオブジェクトストア「Test1」が生成され、その中にデータが１件存在することが分かります。

再度「データ追加」ボタンをクリックするとエラーが発生し、データが追加されません。
オブジェクトストアの生成で指定した keyPath の指定があるので id は重複キーを許可されません。

但し、オブジェクトストア生成の前でコメント行としている autoIncrementのみ指定 に変更すれば、データ項目の中の主キーの指定が無くなります。
そこで、HTMLファイルを変更し再度ブラウザに読込みを行います。この後でブラウザの「ウエブ開発ツール」上でデータベースを削除を行います。

再度「DBオープン」ボタンをクリック後「データ追加」ボタンを複数回クリックすると、同じデータがオブジェクトストアに登録されます。
この場合、オブジェクトストアのなかでは「Key」という項目でデータが付加されその値が順次増加(autoIncrement)していきます。

そこで少しソースを変更し、複数のデータを登録できる様に変更します。「addData」関数をサブ関数として与えられるデータが配列でも処理できる様にします。

<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);
	//DBが存在しない場合、またはバージョン引数よりも小さい場合の作成処理
	request.onupgradeneeded = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		db.onerror = function(event) { 	//エラー処理
			console.log('DBの作成に失敗しました。');
		};

		//オブジェクトストア名の確認
		if (!db.objectStoreNames.contains(objStoreName)) {
			//オブジェクトストアが無い場合
			var objStoreKey = { keyPath: 'id' };	//キー設定
			//オブジェクトストア生成
			var obj = db.createObjectStore(objStoreName, objStoreKey);
			console.log("オブジェクトストア生成");
		}
	};
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ追加処理SUB
 */
function _addData(data) {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//単独データを1件の配列データにする
	var arrData = new Array();
	if (Array.isArray(data) == false) {
		arrData[0] = data;
	} else {
		arrData = data;
	}
	for (var i in arrData) {
		//オブジェクトストアに追加のリクエストします。
		var request = objectStore.add(arrData[i]);
		//追加正常の場合の関数宣言
		request.onsuccess = function(event) {
			console.log('保存成功');
		};
		//追加エラーの場合の関数宣言
		request.onerror = function(event) {
			console.log('保存失敗。event:', event);
		};
	}
}
/**
 *  データ追加処理
 */
function addData() {
	//配列データの例
	var data = [
					{ id: '01' , data1: 'abcde' , data2: 123 , data3: { data3_1: '001', data3_2: 1000 } },
					{ id: '02' , data1: 'a0002' , data2: 200 , data3: { data3_1: '002', data3_2: 2000 } },
					{ id: '03' , data1: 'a0003' , data2: 300 , data3: { data3_1: '003', data3_2: 3000 } },
					{ id: '11' , data1: '11111' , data2: 111 , data3: { data3_1: '101', data3_2: 1111 } },
					{ id: '22' , data1: '2222'  },
					{ id: '33' , data2: 222  }
			   ];

	//単独データの例
	//var data  = { id: '11' , data1: '11111' , data2: 111 , data3: { data3_1: '101', data3_2: 1111 } };
	_addData(data);
}
</script>
</head>
<body>
    <h2>test IndexedDB - add - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonAdd"  onclick="addData()">データ追加</button>
    <br />
</body>
</html>

このソースではオブジェクトストアの生成で keyPath の指定があるので id は重複キーを許可されませんので、データの中の「id」はユニークになる様に設定します。

そこで、HTMLファイルを変更し配列データを登録する様にして再度ブラウザに読込み、ブラウザの「ウエブ開発ツール」上でデータベース「TestDB」のオブジェクトストア「Test1」の全データの削除を行います。その後「DBオープン」ボタンさらに「データ追加」ボタンをクリックします。
そうしますと、以下の図の様にオブジェクトストア「Test1」に6件のデータが登録されます。