Web產品中很多時候需要在客戶端，即瀏覽器中保存一些必要的數據。而面臨這類需求時，你應當知悉對應的解決方案不僅僅只有一種。

Cookie

這是最早被使用，且至今仍被廣泛採用的最簡單的瀏覽器中保存數據方法。

Cookie使用鍵/值形式存儲數據，且數據類型只能為字元串。

Cookie相關的CRUD操作：

• 創建

document.cookie="username=Ken";

• 修改

document.cookie="username=Foo";

和創建Cookie的語法一致，新的值會覆蓋原有的值。

• 查找

var cookies = document.cookie

以上方法可以獲取所有的Cookie鍵值，要想獲得特定鍵值的話可以用以下代碼實現，其中的username可以替換成實際的鍵值：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;s*)usernames*=s*([^;]*).*$)|^.*$/, "$1");

• 刪除

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

雖然沒有直接的刪除方式，但可以通過設置過期時間來解決這個問題。

LocalStorage

HTML 5 Web存儲方式的一種，主要優勢是突破cookie最大只有4KB容量的限制，能夠保存10MB的數據。

與Cookie同樣地使用鍵/值形式存儲數據，且數據類型只能為字元串。

LocalStorage相關的CRUD操作：

• 創建

localStorage.setItem("username", "Ken");

• 修改

localStorage.setItem("username", "Foo");

同樣是覆蓋操作。

• 查找

var username = localStorage.getItem("username");

• 刪除

localStorage.removeItem("username");

一次刪除所有鍵值的方法：

localStorage.clear();

SessionStorage

另一種HTML 5 Web存儲方式，其與LocalStorage的唯一區別在於LocalStorage沒有過期時間，要想去除已保存的數據，只能用代碼執行刪除操作。而用SessionStorage保存的數據在標籤頁或者瀏覽器窗口關閉後自動失效。

SessionStorage相關語法與LocalStorage一致。

Web SQL Database

該技術已被W3C廢棄，理由是各廠家對其的實現方式都是基於SQLite的，從而被認為缺乏多樣性而達不到標準化的要求。

並且該技術僅被Google Chrome，Opera，Safari和Android Browser使用。另兩家主要的瀏覽器廠家的產品，Microsoft的Internet Explorer以及Mozilla的Firefox對它未提供支持。

因此結論是使用其它相似的替換品，而不要再使用它。

IndexedDB

主流瀏覽器產品都支持的一種技術，包括桌面端與移動端。Web SQL Database的替代品。

IndexedDB同Cookie，Local Storage與Session Storage的差別主要有：

• 存儲容量更大，可達50M或更多
• 支持所有的JavaScript數據類型
• 讀寫操作皆包含於事務之內
• 支持索引查詢
• 非同步處理方式

IndexedDB的使用方法與一般的資料庫有些相似，但因為其所有操作都是非同步，所以編寫代碼時的體驗還是很不一樣的。

第一步是打開一個資料庫，如果該資料庫不存在的話，會自動創建一個。

在IndexedDB中，ObjectStore是其它資料庫中數據表的概念。

創建ObjectStore時除了可以指定主鍵之外，還可以對其它欄位建立索引。

var db;
var request = window.indexedDB.open("info");
request.onsuccess = function (event) {
db = request.result;
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore("user", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
}

IndexedDB相關的CRUD操作：

• 創建

function create() {
var store = db.transaction("user", "readwrite").objectStore("user")
var request = store.add({ id: 1, name: "Ken", email: "ken@example.com" });
}
create();

• 修改

function update() {
var store= db.transaction("user", "readwrite").objectStore("user")
var request = store.put({ id: 1, name: "Ken", email: "ken@sample.com" });
}
update()

• 查找

使用主鍵查詢數據的方法：

function query() {
var store = db.transaction("user", "readonly").objectStore("user")
var request = store.get(1)
request.onsuccess = function(event) {
console.log(request.result)
}
}
query()

使用其它欄位索引查詢數據的方法：

function query() {
var store = db.transaction("user", "readonly").objectStore("user")
var request = store.index("name").get("Ken")
request.onsuccess = function(event) {
console.log(request.result)
}
}
query()

• 刪除

function delete() {
var store = db.transaction("user", "readwrite").objectStore("user")
var request = store.delete(1);
}
delete()

作者：Ken.W

原文：https://www.cnblogs.com/kenwoo/p/10230270.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！