indexedDB 新增資料

admin發表於2019-07-18
Index

向資料庫新增資料時最為基本的操作，下面將通過程式碼例項詳細進行一下介紹。

本文只介紹利用物件倉庫的add()方法新增一條資料，批量新增參閱indexedDB 批量新增資料一章節。

程式碼例項如下：

[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.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{keyPath:"id"});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}

request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  objectStore.add({
    id:1,
    name:"螞蟻部落",
    age:20,
    sex:"男"
  });
}
</script>
</head>
<body>
  <p>為物件倉庫新增資料</p>
</body>
</html>

上述程式碼為物件倉庫"students"新增一條資料，程式碼執行效果截圖如下：

aid[3390]

程式碼分析如下：

（1）.通過indexedDB.open方法建立或開啟對應名稱的資料庫。

（2）.如果是新建立資料庫，則首先觸發upgradeneeded事件，在此事件處理函式中建立對應的物件倉庫，並進行相關設定，比如對主鍵和索引的設定。然後再觸發success事件，並在其事件處理函式中新增一條資料。

（3）.資料的新增操作必須在transaction事務中進行，其實對於資料的讀寫操作和物件倉庫的新增修改等操作都是如此。

相關閱讀：

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

（2）.upgradeneeded參閱indexedDB upgradeneeded事件一章節。

（3）.建立物件倉庫參閱createObjectStore() 建立物件倉庫一章節。

（4）.建立索引參閱IDBObjectStore.createIndex() 索引一章節。

（5）.關於事務參閱indexedDB 資料庫transaction事務一章節。

相關文章