[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
今回は「オブジェクトストア」のデータを削除する方法について説明します。
データ削除を行う場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、 「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの 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 の使い方2(データ追加)」の最後の部分の6件のデータ生成で再度データを追加します。
その後、上記のHTMLソースをロードし、 「DBオープン」ボタンをクリック後 「データ削除」ボタンをクリックすると、キー範囲が '01' ~ '22' のデータが全て削除されていることが分かります(下図参照)。
関連する記事
⇒JavaScript IndexedDB の使い方1(データベースオープン)⇒JavaScript IndexedDB の使い方2(データ追加)
⇒JavaScript IndexedDB の使い方3(データ取得)
⇒JavaScript IndexedDB の使い方4(全データ取得)
⇒JavaScript IndexedDB の使い方5(カーソル処理)
⇒JavaScript IndexedDB の使い方6(データ削除)
コメント