本文轉(zhuǎn)載自公眾號“讀芯術”(ID：AI_Discovery)

[[378002]]

現(xiàn)代網(wǎng)絡瀏覽器為網(wǎng)絡應用提供多種存儲選項。每個存儲選項都不一樣，有各自的屬性和應用。然而，若要根據(jù)自身需求選擇合適的存儲選項，需要對它們的屬性和限制有充分的理解。本文將探究5個瀏覽器儲存選項以及它們的狀況，幫助你找到最適合你需求的那個。

快速瀏覽一下Chrome開發(fā)者工具，會發(fā)現(xiàn)以下幾種瀏覽器存儲類型：

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookies

讓我們來詳細了解一下每個存儲選項及其特定屬性。

1.Local Storage

Local Storage是比較廣泛使用的一種存儲方式，因為簡單。這種存儲方式允許存儲序列化為字符串的鍵值對。你可以在Local Storage上執(zhí)行以下操作：

• setItem() — save key-value
• getItem() — get key-value
• removeItem() — remove key-value
• clear() — clear all key-values
• key() — retrieve number nth key-value

要將Local Storage中的值設置為數(shù)組、對象等，需要使用JSON.stringify將值轉(zhuǎn)換為字符串。檢索時，JSON.parse將該項重新構(gòu)造回JSON。

//set key-value pair at local storage as a string 
localStorage.setItem('session', JSON.stringify({'id': 5, 'timeout' :500000}));//get value as an object 
var sessionItem = JSON.parse(localStorage.getItem('session')); 

主要亮點：

• Local Storage在同一來源的所有選項卡和窗口之間共享。
• 數(shù)據(jù)不會過期。
• 支持存儲事件。

存儲事件是由Local Storage和Session Storage支持的一項功能，它只觸發(fā)其他選項卡(不包括觸發(fā)它的選項卡)和iFrames中的事件偵聽器。讓我們仔細看看存儲事件：

//Firing storage event by addEventListener 
window.addEventListener('storage', () => { 
 console.log(window.localStorage.getItem('id')); 
}); 

2.SessionStorage

Session Storage與Local Storage類似，唯一的區(qū)別是session storage里的數(shù)據(jù)可以持續(xù)到關閉瀏覽器選項卡。因此，Session Storage已經(jīng)擴展到應用程序源和瀏覽器選項卡。

我很好奇存儲事件是如何與Session Storage協(xié)作的。即使有存儲事件，瀏覽器選項卡隔離仍然存在。對于Session Storage，存儲事件只能通過同一選項卡中的iFrames進行訪問。

此外，無論是Local Storage還是Session Storage，訪問都是同步的，你的JavaScript代碼將在訪問這些存儲時一直等到接收到數(shù)據(jù)。

3.IndexedDB

與上述存儲選項相比，IndexedDB與典型的NoSQL數(shù)據(jù)庫更相近。在處理復雜的、難以序列化的JavaScript對象時，可以考慮IndexedDB。IndexedDB還支持事務，同時與Web Workers協(xié)作良好。

舉個例子，Twitter使用帶有三個表的IndexedDB保存數(shù)據(jù)。你可以在數(shù)組中查找最近的搜索，以提高可用性。

主要亮點：

• 可以存儲任何JavaScript類型的數(shù)據(jù)作為鍵值對，如對象(blob，file)或數(shù)組等。
• IndexedDB API是異步的，因此在請求完成時，它會返回一個回調(diào)。
• 可以存儲結(jié)構(gòu)化數(shù)據(jù)，如日歷數(shù)據(jù)。

4.Web SQL(不推薦)

最近，W3C宣布不推薦使用WebSQL規(guī)范，更好的選擇是高效的indexedDB。Web SQL是遵循SQLite規(guī)范的存儲。谷歌瀏覽器、Opera和安卓瀏覽器都支持這個API(注意:火狐瀏覽器不支持Web SQL)。

Web SQL中有三種方法，

• openDatabase()——使用現(xiàn)有數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)庫或創(chuàng)建新數(shù)據(jù)庫。
• transaction ()—控制事務(提交或回滾)。
• executeSql()—可以執(zhí)行真實的Sql查詢。

var db =openDatabase(‘testDB’, ‘1.0’, ‘Test DB’, 3* 1024 * 1024);  
db.transaction(function (tr) {  
 tr.executeSql(‘CREATE TABLE IF NOTEXISTS TestTable (id unique, data)’);  
 tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (1, “itemOne”)’);  
 tr.executeSql(‘INSERT INTO TestTable(id, data) VALUES (2, “itemTwo”)’);  
}); 

主要亮點：

• 與其他存儲選項不同，你可以使用SQL查詢與數(shù)據(jù)庫進行交互。
• 對于任何熟悉SQLite的人來說，學習空間很小甚至是沒有。

5.Cookies

Cookies是唯一一個也與服務器共享的瀏覽器存儲選項。兩類Cookies分別是：

• 服務器端Cookie(僅僅適用于HTTP的Cookie)——由服務器設置的變量，存儲在瀏覽器中。用于存儲應用程序狀態(tài)。無法通過JavaScript訪問。
• 客戶端Cookie——與服務器端Cookie類似，但是可以通過JavaScript訪問。

//Initialize a cookie 
document.cookie = “username=Charuka Herath; expires=Thu, 31 Dec 2020 12:00:00UTC; path=/”;//Read a cookie 
var cookie= document.cookie;//Remove cookie (Set expiration date to a pastdate) 
document.cookie = "username=; expires=Thu, 31 Dec 2019 12:00:00 UTC;path=/"; 

值得注意的是，對于每個請求，瀏覽器都會向服務器返回Cookies。因此，需要將它們最小化，以減少開銷。

主要亮點：

• 高效地恢復會話、頁面細節(jié)、網(wǎng)頁線程。
• Cookies會持續(xù)存在。因此，數(shù)據(jù)可以保存在瀏覽器中，直到它們被清除。
• 可以根據(jù)特定用戶的偏好進行管理并提供個性化內(nèi)容。
• 支持帶通配符的跨來源。

就安全性而言，這些存儲選項不是為了存儲敏感數(shù)據(jù)而設計的。但是，在Local Storage(由受歡迎的JavaScript庫支持，這些庫是開放的，可以進行解釋)中存儲身份驗證令牌(OpenID令牌)的趨勢越來越明顯。Cookie在保留會話標識符方面有一個例外，這是專門為其存儲而設計的。

此外，需要注意的是，Safari中的私人瀏覽(匿名)不允許用戶訪問Local Storage或Session Storage。因此，如果你繼續(xù)使用這些存儲選項，處理錯誤情況并向用戶顯示相關消息是非常重要的。

選擇存儲選項時，如果只需存儲簡單的鍵值對，Local Storage是不錯的選擇。如果你計劃對瀏覽器選項卡確定稍微好一點的安全范圍，可以選擇Session Storage。在選擇這兩個選項之前，請記住存儲限制。

對于任何高級存儲需求，你都可以使用IndexedDB，這是一種更好的數(shù)據(jù)庫解決方案。