indexedDB 刪除資料

admin發表於2019-07-21
Index

本文將通過程式碼例項詳細介紹一下如何刪除indexedDB資料中的資料。

由於indexedDB資料庫並沒有表的概念，而是採用objectStore物件倉庫替代。

所以本文介紹的就是如何從objectStore物件倉庫刪除對應的資料。

關於物件倉庫參閱createObjectStore() 建立物件倉庫一章節。

首先看操作程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let obt=document.getElementById("bt");
  obt.onclick = (ev) => {
    let transactionRequest = db.transaction(['students'], 'readwrite')
      .objectStore('students')
      .delete(1);
 
    transactionRequest.onsuccess = function (event) {
      console.log('刪除資料成功');
    };
 
    transactionRequest.onerror = function (event) {
      console.log('刪除資料失敗');
    }
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上述演示如何刪除物件倉庫中的資料，資料時通過IndexedDB 資料庫新增資料一文新增。

程式碼執行效果截圖如下：

aid[3350]

可以看到物件倉庫中的資料已經被刪除，並且在控制檯也列印出對應的字串。

程式碼簡單分析如下：

（1）.首先，通過indexedDB.open方法開啟對應的資料庫。

（2）.資料庫開啟成功會觸發success事件，事件處理函式會為按鈕註冊click事件處理函式。

（3）.click事件處理函式會通過事務物件相關操作進行處理，indexedDB讀寫操作必須要通過事務。

（4）.delete方法的引數是對應資料的主鍵，具體用法參閱IDBObjectStore.delete() 方法一章節。

更多內容不再介紹，具體可以參閱如下幾篇文章：

（1）.事務可以參閱IDBTransaction 事務物件一章節。

（2）.indexedDB.open可以參閱IndexedDB.open()開啟與新建資料庫一章節。

（3）.關於主鍵可以參閱IndexedDB 資料庫主鍵一章節。

相關文章