IndexedDB 資料庫用法

關於IndexedDB資料庫概述可以參閱IndexedDB 資料庫概述一章節。

本文將在總體上介紹一下IndexedDB資料的用法，目的是讓讀者能夠大致掌握資料庫的使用流程。

考慮到篇幅問題，本文不會對具體技術細節做過多介紹，更多內容可以參閱對應的相關文章。

一.資料的開啟與新建：

在利用本地IndexedDB資料庫之前，需要開啟一個資料庫，如果沒有則需要新建。

通過indexedDB.open方法即可開啟或者新建一個資料庫，indexedDB屬於window物件。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let request = window.indexedDB.open(databaseName, version);

由於indexedDB屬於window物件，所以在呼叫時可以將window省略。

引數解析：

（1）.databaseName：必需，用於規定資料庫的名稱。

（2）.version：可選，用於規定資料庫的版本，一個數值型別。

通過上述方式可以開啟指定名稱與版本的IndexedDB資料庫。

如果無對應資料庫則會通過上述方法新建一個資料庫，開啟與新建資料庫都採用indexedDB.open方法。

需要注意的是，此方法是一個非同步操作，類似於AJAX請求，返回的結果並不是資料庫，而是IDBOpenDBRequest物件。

關於indexedDB.open方法更為詳細介紹參閱IndexedDB.open()開啟與新建資料庫一章節。

二.新增物件倉庫：

在關係型資料庫中，建立資料庫後，如果要儲存資料，那麼首先要建立一個表，然後再新增行。

但是IndexedDB資料庫並沒有表的概念，替代表的是objectStore物件倉庫，可以認為它是indexedDB中的表。

通過createObjectStore方法可以建立物件倉庫，此方法屬於IDBDatabase資料庫物件。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let objectStore = db.createObjectStore("person",{ keyPath: 'id' });

引數解析如下：

（1）.db：IDBDatabase資料庫物件，也就是建立或者開啟的資料庫。

（2）.person：建立物件倉庫的名稱，一個字串。

（3）.{ keyPath: 'id' }：一個配置物件，設定物件倉庫儲存資料的主鍵為id。

程式碼例項片段如下：

[JavaScript] 純文字檢視 複製程式碼
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('person')) {
    let objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  let objectStore = db.createObjectStore("person",{ keyPath: 'id' });
}

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

程式碼分析如下：

（1）.首先通過indexedDB.open方法建立或者開啟資料庫"antzone"。

（2）.indexedDB.open方法是一個非同步操作，返回的是一個IDBOpenDBRequest物件。

（3）.IDBOpenDBRequest物件upgradeneeded或success事件可以監聽資料庫升級（包括建立）或開啟是否成功。

（4）.如果新建立資料庫，那麼會觸發upgradeneeded事件，然後再觸發success事件。

（5）.如果資料庫已經存在，且不涉及版本更新，那麼只觸發success事件。

（6）.當然如果出錯，則會觸發error事件。

（7）.假設上述程式碼是新建資料庫，那麼會首先觸發upgradeneeded事件並建立對應物件倉庫，然後再觸發success事件，這時候需要判斷一下對應的物件倉庫是否存在，如果存在則不再去建立，否則會報錯。

更多關於建立物件倉庫內容可以參閱indexedDB createObjectStore()建立物件倉庫一章節。

三.資料操作：

資料庫的資料操作無非是增刪改查，資料儲存在物件倉庫中。

通過物件倉庫的如下對應方法可以實現相應的資料操作：

（1）.新增資料具體參閱IDBObjectStore.add() 方法一章節。

（2）.讀取資料具體參閱IDBObjectStore.get() 方法一章節。

（3）.遍歷資料具體參閱IndexedDB資料庫遍歷資料一章節。

（4）.更新資料具體參閱IDBObjectStore.put() 方法一章節。

（5）.刪除資料具體參閱IDBObjectStore.delete() 方法一章節。

IndexedDB資料庫相關知識內容比較多，上述文章簡略介紹了IndexedDB資料的基本操作。

為便於操作，HTML5將資料庫涉及到的實體抽象成不同的物件介面，參閱IndexedDB 資料庫物件介面概述一文。