概述

前篇：web API簡介(三)：客戶端儲存之Web Storage API

客戶端儲存從某一方面來說和動態網站差不多。動態網站是用服務端來儲存數據，而客戶端儲存是用客戶端來儲存數據。

IndexedDB API就是現代HTML5客戶端儲存的方法之二。

IndexedDB介紹

IndexedDB是專門為大量結構化數據設計的。

IndexedDB有這些特性：

(1)IndexedDB數據庫儲存的是鍵值對。

(2)IndexedDB是基於事務型數據庫模型的。

(3)IndexedDB API是異步型的。

(4)IndexedDB使用很多請求(requests)和響應。

(5)IndexedDB使用DOM通知你，當結果被返回的時候。

(6)IndexedDB數據庫是對象型的數據庫。

(7)IndexedDB不使用SQL。

(8)IndexedDB遵循同源政策。

IndexedDB有這些限制：

(1)不支持排序。

(2)不支持同步操作。你必須自己寫同步操作代碼。

(3)不支持全文搜索，不支持類似SQL中的LIKE功能。

儲存限制

indexedDB的Storage屬性有2種：永久型和臨時型。

永久型數據沒有任何限制，永久儲存，只有當用戶刪除它的時候才會被刪除。

臨時型數據有一個全局限制和同源限制。全局限制是指臨時性數據的總量是50%的磁盤總量。當超出的時候，瀏覽器會自動刪除最久遠被用到的數據，直到可以儲存目前需要儲存的數據。同源限制是指同源下的臨時型數據總量有一個限制，這個限制是全局限制的20%，但不低於10M，且不超過2G。當超出同源限制的時候，瀏覽器會拋出一個錯誤。

IndexedDB的使用模式

和MongoDB的使用差不多，具體如下：

(1)打開一個數據庫。

(2)在數據庫中建立一個object store。

(3)開始一項事務，並且用請求來操作數據庫。

(4)通過監聽DOM事件等待事務完成。

(5)利用返回的數據(request object)做一些操作。

使用IndexedDB

檢驗是否支持IndexedDB

if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}
 

打開IndexedDB數據庫

var request = window.indexedDB.open("MyTestDatabase", 3);

其中3是版本號。版本號不能用小數，否則會被四舍五入成整數。

更新IndexedDB數據庫版本

在request發出後，onerror和onsuccess響應前，如果打開的IndexedDB數據庫版本比已經存在的數據庫版本低，那麽就會出現onerror，如果如果打開的IndexedDB數據庫版本比已經存在的數據庫版本高，就會響應onupgradeneeded事件。

var request = indexedDB.open(dbName, 2);

//存在的數據庫版本比2低的時候響應如下事件。
request.onupgradeneeded = function(event) {

  //數據庫在event.target的resule屬性裏面
  var db = event.target.result;

  //建立object store，並設立鍵值
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  //設定object store的索引name，並設定為可以重復
  objectStore.createIndex("name", "name", { unique: false });

  //設定object store的索引email，並設定為不可以重復
  objectStore.createIndex("email", "email", { unique: true });
  };

也可以利用autoIncrement設定一個自增長的鍵值。

//建立object store，並設立自增長的鍵值，儲存在key字段中
var objectStore = db.createObjectStore("customers", { autoIncrement: true });

等待並返回IndexedDB數據庫

var db;
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = event.target.result;
};

占坑

占坑

web API簡介(四)：客戶端儲存之IndexedDB API