《客戶端儲存技術》總結

該文章目錄

• 使用cookie
• 使用Web儲存
• 使用indexDB
• 使用Web SQL
• 使用庫簡化
• 示例程式

說明：

《客戶端儲存技術》是一本mini 書，只有100來頁。如果對於客戶端儲存方面不瞭解的可以看看這本，作者講得很簡潔明瞭，沒有涉及太深的東西。當然，如果瞭解過客戶端儲存技術，而且知道indexDB，那麼沒必要讀這本書了。入手這本書不到幾天就刷完了，也乘此機會做下總結，希望同時也對其他人有所作用。

1.cookie

cookie是什麼這裡就不贅述了，不瞭解的自行百度吧！

建立：

語法：

<code>document.cookie = "nameOfCookie=value";</code>

示例：

<code>document.cookie = "name=Raymond";</code>

讀取：

沒有API 可以用來獲取“一個”cookie,只能是把cookie都讀取出來。
具體做法是：

<code>document.cookie</code>

刪除：

刪除cookie只需要將其過期時間設為過去時間即可。

<code>document.cookie = "name=Raymond; expires=Thu, 01 Jan 1970 00:00:00 GMT";</code>

2.使用Web儲存

兩個版本：本地儲存（Local Storage）和會話儲存（Session Storage）。兩者使 用完全相同的API，但本地儲存會持久存在（或者直到使用者清除），而會話儲存只要瀏覽器 關閉就會消失。因為大多數人都使用持久化版本，所以大多數開發人員使用（和談論）的 都是本地儲存。

4個API：

• localStorge.setItem:設定特定鍵值；
• localStorge.getItem:檢索特定的鍵值；
• localStorge.removeItem:刪除鍵值及其相關聯的值；
• localStorge.clear:刪除所有的鍵值（只限定於發出請求的特定域名）

瀏覽器支援建議：

3.使用indexDB

IndexedDB 是一個功能強大且高度靈活的儲存系統。 你可以使用它在使用者瀏覽器中儲存你希望儲存的任何資料。不過，出色的功能和靈活性致 使其API 不像Web 儲存那麼友好。你還會發現，移動端瀏覽器對IndexedDB 的支援還不 是很好，即使支援，其實現方式也很糟糕（iOS 8 對IndexedDB 的支援尤其差，你最好當 它不支援）。不過，IndexedDB 將來可能會成為在客戶端儲存大量資料的標準方法。更多瞭解可以檢視indexDB 規範

檢查是否支援：

<code>
function idbOK(){
    return "indexDB" in window &&
    !/ipad/iphone/ipod/.test(navigator.platform);
}
</code>

使用：

1.

<code>
function idbOK() {
return "indexedDB" in window;
}
var db;
$(document).ready(function() {
if(!idbOK()) return;
var openRequest = indexedDB.open("ora_idb1",1);//開啟indexDBA

//第一次使用資料庫onupgadeneeded被觸發，同時表示建立完成
openRequest.onupgradeneeded = function(e) {
console.log("running onupgradeneeded");
}

//重複開啟執行下面函式
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
}
openRequest.onerror = function(e) {
console.log("onerror!");
console.dir(e);
}
});
</code>

2.

<code>
function idbOK() {
return "indexedDB" in window;
}
var db;
$(document).ready(function() {
if(!idbOK()) return;
var openRequest = indexedDB.open("ora_idb2",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;//取得資料庫物件本身
console.log("running onupgradeneeded");

//利用contains方法檢視物件是否存在
if(!thisDB.objectStoreNames.contains("firstOS")) {
console.log("makng a new object store");
thisDB.createObjectStore("firstOS");//建立物件
}
}

//建立成功，則
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
console.dir(db.objectStoreNames);
}

//建立失敗，則
openRequest.onerror = function(e) {
console.log("onerror!");
console.dir(e);
}
});
</code>

3.

<code>
//定義主鍵
somedb.createObjectStore("people", {keyPath: "email"});//建立了一個名為people 的物件儲存，並假定每條資料都包含一個名為email 的唯一
屬性
somedb.createObjectStore("notes", {autoIncrement:true});//該示例建立了一個名為notes 的物件儲存，並使用一個自增值自動為主鍵賦值
somedb.createObjectStore("logs", {keyPath: "id", autoIncrement:true});//建立了一個名為logs 的物件儲存。這一次，使用自增值並將其儲存在一個名為id
的屬性中
</code>

4.

 <code>
    objectStore.createIndex("name of index", "path", options);//第一個引數是索引名稱，第二個引數是你希望索引的資料屬性

    //，第一個索引建在性別屬性上，讓你可以根據人的性別獲取資料。第二個索
    引建在社會保障號屬性上，並且是唯一的
    objectStore.createIndex("gender", "gender", {unique:false});
    objectStore.createIndex("ssn", "ssn", {unique:true});
    </code>

5.

 <code>
//運算元據
someObjectStore.add(data, somekey);//增加
someObjectStore.get(primaryKey);//獲取
someObjectStore.put(data);//更新
someObjectStore.delete(primaryKey);//刪除
此外還有獲取全部資料和使用索引等東西。
</code>

瀏覽器支援建議：

4.使用Web SQL

說明：

這是一個已經廢棄或即將廢棄的規範，可以忽略這部分內容。

<code>
//檢查支援與否
function webSQLOK() {
return "openDatabase" in window;
}
db = window.openDatabase("name","1","nice name",5*1024*1024);//開啟資料庫
db.readTransaction(function to do stuff, error handler, success handler);//開啟一個只讀事務
</code>

5.使用庫簡化

作者推薦的有： + Lockr + Dexie + localForage + PouchDB + lawnchair + 等等

6.示例

作者最後一章講述瞭如何構建一個真實的程式。詳情參見原始碼。

PS：

原始碼jquery是使用連線的，連線可能被牆，可以自己外聯jquery庫。 本地儲存應用：可以儲存使用者資訊，比如表格資訊，評論內容等等，以與優化使用者體驗。

以上