IndexedDB 資料庫用法

admin發表於2019-06-09

關於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(objectStoreName,{ keyPath: 'id' });

引數解析如下:

(1).db:IDBDatabase資料庫物件,也就是建立或者開啟的資料庫。

(2).objectStoreName:被建立物件倉庫的名稱,字串。

(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' });
}

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/09/220246lhxebd2jyyu8y28r.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下:

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

(2).indexedDB.open方法是一個非同步操作,返回的是一個IDBOpenDBRequest型別物件request。

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

(4).如果新建立資料庫成功,那麼首先觸發upgradeneeded事件,然後再觸發success事件。

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

(6).當然如果出錯,則會觸發error事件。

(7).假設上述程式碼是新建資料庫,首先觸發upgradeneeded事件並建立對應物件倉庫,然後再觸發success事件。建立物件倉庫需要在upgradeneeded事件處理函式中進行,最好首先判斷一下對應的物件倉庫是否存在,如果存在則不再去建立,否則會報錯。

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

三.資料操作:

資料操作無非是增刪改查,資料儲存在物件倉庫中,通過如下方法可以實現對應操作:

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

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

(3).遍歷資料具體參閱IndexedDB 遍歷資料一章節。

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

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

相關文章