2021年了，你該選擇哪個瀏覽器存儲選項？
本文轉載自公眾號“讀芯術”(ID：AI_Discovery)
現代網絡瀏覽器為網絡應用提供多種存儲選項。每個存儲選項都不一樣，有各自的屬性和應用。然而，若要根據自身需求選擇合適的存儲選項，需要對它們的屬性和限制有充分的理解。本文將探究5個瀏覽器儲存選項以及它們的狀況，幫助你找到最適合你需求的那個。
快速瀏覽一下Chrome開發者工具，會發現以下幾種瀏覽器存儲類型：
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookies
讓我們來詳細了解一下每個存儲選項及其特定屬性。
1.Local Storage
Local Storage是比較廣泛使用的一種存儲方式，因為簡單。這種存儲方式允許存儲序列化為字符串的鍵值對。你可以在Local Storage上執行以下操作：
- 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中的值設置為數組、對象等，需要使用JSON.stringify將值轉換為字符串。檢索時，JSON.parse將該項重新構造回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在同一來源的所有選項卡和窗口之間共享。
- 數據不會過期。
- 支持存儲事件。
存儲事件是由Local Storage和Session Storage支持的一項功能，它只觸發其他選項卡(不包括觸發它的選項卡)和iFrames中的事件偵聽器。讓我們仔細看看存儲事件：
- //Firing storage event by addEventListener
- window.addEventListener('storage', () => {
- console.log(window.localStorage.getItem('id'));
- });
2.SessionStorage
Session Storage與Local Storage類似，唯一的區別是session storage里的數據可以持續到關閉瀏覽器選項卡。因此，Session Storage已經擴展到應用程序源和瀏覽器選項卡。
我很好奇存儲事件是如何與Session Storage協作的。即使有存儲事件，瀏覽器選項卡隔離仍然存在。對于Session Storage，存儲事件只能通過同一選項卡中的iFrames進行訪問。
此外，無論是Local Storage還是Session Storage，訪問都是同步的，你的JavaScript代碼將在訪問這些存儲時一直等到接收到數據。
3.IndexedDB
與上述存儲選項相比，IndexedDB與典型的NoSQL數據庫更相近。在處理復雜的、難以序列化的JavaScript對象時，可以考慮IndexedDB。IndexedDB還支持事務，同時與Web Workers協作良好。
舉個例子，Twitter使用帶有三個表的IndexedDB保存數據。你可以在數組中查找最近的搜索，以提高可用性。
主要亮點：
- 可以存儲任何JavaScript類型的數據作為鍵值對，如對象(blob，file)或數組等。
- IndexedDB API是異步的，因此在請求完成時，它會返回一個回調。
- 可以存儲結構化數據，如日歷數據。
4.Web SQL(不推薦)
最近，W3C宣布不推薦使用WebSQL規范，更好的選擇是高效的indexedDB。Web SQL是遵循SQLite規范的存儲。谷歌瀏覽器、Opera和安卓瀏覽器都支持這個API(注意:火狐瀏覽器不支持Web SQL)。
Web SQL中有三種方法，
- openDatabase()——使用現有數據庫創建數據庫或創建新數據庫。
- transaction ()—控制事務(提交或回滾)。
- executeSql()—可以執行真實的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查詢與數據庫進行交互。
- 對于任何熟悉SQLite的人來說，學習空間很小甚至是沒有。
5.Cookies
Cookies是唯一一個也與服務器共享的瀏覽器存儲選項。兩類Cookies分別是：
- 服務器端Cookie(僅僅適用于HTTP的Cookie)——由服務器設置的變量，存儲在瀏覽器中。用于存儲應用程序狀態。無法通過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。因此，需要將它們最小化，以減少開銷。
主要亮點：
- 高效地恢復會話、頁面細節、網頁線程。
- Cookies會持續存在。因此，數據可以保存在瀏覽器中，直到它們被清除。
- 可以根據特定用戶的偏好進行管理并提供個性化內容。
- 支持帶通配符的跨來源。
就安全性而言，這些存儲選項不是為了存儲敏感數據而設計的。但是，在Local Storage(由受歡迎的JavaScript庫支持，這些庫是開放的，可以進行解釋)中存儲身份驗證令牌(OpenID令牌)的趨勢越來越明顯。Cookie在保留會話標識符方面有一個例外，這是專門為其存儲而設計的。
此外，需要注意的是，Safari中的私人瀏覽(匿名)不允許用戶訪問Local Storage或Session Storage。因此，如果你繼續使用這些存儲選項，處理錯誤情況并向用戶顯示相關消息是非常重要的。
選擇存儲選項時，如果只需存儲簡單的鍵值對，Local Storage是不錯的選擇。如果你計劃對瀏覽器選項卡確定稍微好一點的安全范圍，可以選擇Session Storage。在選擇這兩個選項之前，請記住存儲限制。
對于任何高級存儲需求，你都可以使用IndexedDB，這是一種更好的數據庫解決方案。
