JavaScript IndexedDB の使い方６（データ削除）｜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 の使い方２（データ追加）」の最後の部分の６件のデータ生成で再度データを追加します。