作者：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。原文鏈接：https://segmentfault.com/a/1190000040147911

點擊上方?程序員成長指北，關注公眾號

回復1，加入高級Node交流群

數據持久

數據持久指將內存中的數據模型轉化為存儲模型，和將存儲模型轉化為內存中的數據模型這一過程的統稱。在普通情況下，我們存儲的數據會一直保留，直到我們刪除相關內容；或者是這些數據保存到瀏覽器會話結束，用戶關閉之后。
但在實際情況中會更加復雜一些。用戶、操作系統、瀏覽器或插件都可以隨時阻止或刪除持久數據。瀏覽器有權限刪除存儲內容比較陳舊或者是比較大的項目內容；還能記錄頁面狀態，當我們離開當前頁面，重新打開頁面的時候上次記錄的內容會得到保存記錄，可以直接使用。

使用場景

當數據并不需要發送到web服務器或者并不需要數據內容時，只需要在瀏覽器中存儲和操作數據（也叫客戶端）會用到數據持久，而需要在瀏覽器中存儲和操作數據具體包括以下幾種情況：

• 保留客戶端應用程序的狀態—例如當前屏幕、輸入的數據、用戶首選項等

• 訪問本地數據或文件并有嚴格隱私要求的實用程序

• 脫機工作的漸進式web應用程序（PWA）
  接下來將為大家詳細比較10中不同的客戶端存儲方式，包括這些方法的限制、優缺點以及每種方式的使用，方便大家選擇根據自己的使用場景進行選擇。

• JavaScript變量

• DOM節點（DOM node）存儲

• Web存儲（localStorage和sessionStorage）

• IndexedDB/索引數據-

• Cache API（不使用AppCache）

• 文件系統訪問API

• 文件和目錄項API

• cookies

• window.name

• WebSQL

  總體比較

文本將從容量、讀寫速度、數據持久三個角度進行比較這十種方式，接下來為大家介紹詳細內容。

JavaScript變量
將狀態存儲在JavaScript變量中是最快、最簡單的，例子如下：

優勢

• 易于使用

• 快捷

• 不需要序列化或反序列化

缺點

• 易失：刷新或者關閉標簽會清除所有內容

• 第三方腳本可以檢查或覆蓋全局（窗口）值
  如果你已經在使用JS變量，可以考慮在page unloads時永久存儲變量狀態

2.DOM節點（DOM node）存儲

大多數DOM元素，無論是在頁面上還是在內存中，都可以在命名屬性中存儲值。使用以data-為前綴的屬性名稱更安全：

• 該屬性不會關聯HTML

• 可以通過數據集屬性而不是較長的.setAttribute和.getAttribute方法訪問值存儲為字符串，因此可能需要序列化和反序列化。例如：

優勢

• 可以在JavaScript或HTML中定義值，例如<main data-value1=“1”>

• 用于存儲特定組件的狀態

• DOM速度過快

缺點

• 易碎：刷新或關閉當前內容會清除所有內容（除非服務器將值傳遞到HTML中）

• 字符串需要序列化和反序列化

• 較大的DOM會影響性能

• 第三方腳本可以檢查或覆蓋值
  DOM節點存儲比變量慢。在將組件的狀態存儲在HTML中是可行的情況下，使用的時候需要注意這一點。現在這種方式已經被逐漸淘汰，原因是DOM節點生成樹的存儲速度過慢，在大型項目中的效率十分低下。不過為了解決這個問題現在HTML 5的Canvas已有了詳盡的解決方案， 比如SpreadJS純前端表格組件已經引入了Canvas繪制模型和雙緩存畫布技術，使項目效率大大提升。

3.Web存儲（localStorage和sessionStorage）

Web存儲提供了兩個類似的api來定義名稱/值對：

• window.localStorage：存儲持久數據
  ?- window.sessionStorage：在瀏覽器選項內容保持打開狀態時僅保留會話數據

使用.setItem方法存儲或更新命名項：

使用.getItem方法進行檢索：

使用.removeItem方法刪除：

8.png

優勢

• 簡單名稱/值對API

• 有會話和持久存儲選項

• 良好的瀏覽器支持

缺點

• 僅字符串：需要序列化和反序列化

• 無事務、索引或搜索的非結構化數據

• 同步訪問將影響大型數據集的性能

Web存儲非常適合于更簡單、更小、特別的值。存儲大量結構化信息不太實用，但是我們可以通過在頁面卸載時寫入數據來避免性能問題。

4.IndexedDB/索引數據庫

10.png

IndexedDB提供了一個類似NoSQL的低級API來存儲大量數據。可以進行索引存儲，使用事務更新存儲，并使用異步方法搜索存儲。
IndexedDBapi很復雜，需要一些事件處理。以下函數在傳遞名稱、版本號和可選升級函數（在版本號更改時調用）時打開數據庫連接：

11.png

下面內容連接到myDB數據庫并初始化todo對象存儲（類似于SQL表或MongoDB集合）。然后定義一個名為id的自動遞增鍵：

12.png

數據庫連接就緒后，可以在事務中添加新數據項：

13.png

此時可以檢索值

14.png

優勢

• 具有最大空間的靈活數據存儲

• 強大的事務、索引和搜索選項

• 良好的瀏覽器支持

缺點

• 回調復雜，API基于事件

• IndexedDB可以存儲大量數據，但需要使用諸如idb、Dexie.js或JsStore之類的包裝器庫。

Cache API

15.png

Cache API為HTTP請求和響應對象對提供存儲。您可以創建任意數量的命名緩存來存儲任意數量的網絡數據項。

API通常對緩存漸進式web應用進行網絡響應。當設備與網絡斷開連接時，重新提供緩存內容，以便web應用程序可以脫機運行。

以下代碼將網絡響應存儲在名為myCache的緩存中：

16.png

類似的函數可以從緩存中檢索項。下面的例子中，它返回響應正文文本：

17.png

優勢

• 存儲任何網絡響應

• 可以提高web應用程序性能

• 允許web應用程序脫機運行

• 基于Promise的現代API

缺點

• 不適用于存儲應用程序狀態

• 在漸進式web應用程序之外不太有用

• 蘋果對PWAs和Cache API并不友好

Cache API是存儲從網絡檢索的文件和數據的最佳選擇。我們可以使用它來存儲應用程序狀態。

文件系統訪問API

18.png

文件系統訪問API允許瀏覽器從本地文件系統讀取、寫入、修改和刪除文件。瀏覽器在沙盒環境中運行，因此用戶必須授予對特定文件或目錄的權限。這將返回一個FileSystemHandle，以便web應用程序可以像桌面應用程序一樣讀取或寫入數據。

以下函數將Blob保存到本地文件：

19.png

優勢

• web應用程序可以安全地讀取和寫入本地文件

• 不需要在服務器上上傳文件或處理數據

缺點

• 只有最低限度的瀏覽器支持（僅限Chrome）

• API會發生更改

這種儲存方式的優勢幾乎是壓倒性的

文件和目錄項API

20.png

文件和目錄條目API提供了一個可用于域的文件系統，該系統可以創建、寫入、讀取和刪除目錄和文件。
優勢

• 存在一些可探索的有趣用法

缺點

• 實現和行為之間的非標準、不兼容可能會改變

不過目前MDN明確聲明：不要在生產站點上使用此選項，技術廣泛的支持還需要幾年。

cookies

21.png

Cookie是特定于域的數據，用來跟蹤用戶，但對于任何需要維護服務器狀態的系統（如登錄）來說，它們都是必不可少的。與其他存儲機制不同的是，cookies（通常）在瀏覽器和服務器之間的HTTP請求和響應上傳遞。兩個設備都可以檢查、修改和刪除cookie數據。
使用document.cookie在客戶端中設置cookie值，使用方法：

22.png

值不能包含逗號、分號或空格，所以需要 encodeURIComponent方法：

23.png

示例：設置一個狀態cookie，該cookie將在10分鐘后過期，并且在當前域中的任何路徑上都可用：

24.png

document.cookie返回一個字符串，其中包含由分號分隔的每個名稱和值對。例如：

25.png

下面的函數解析字符串并將其轉換為包含name-value的對象。例如：

26.png

優勢

• 可在在客戶機和服務器之間保留數據狀態

• 僅限于域和路徑（可選）

• 自動過期控制，最大過期時間（秒）或過期時間（日期）

• 默認情況下在當前會話中使用（設置過期日期，可以在頁面刷新和標簽關閉之后保留數據）

缺點

• 瀏覽器和插件會阻止Cookie（它們通常被轉換為會話Cookie，這樣站點就可以繼續工作）

• JavaScript實現需要創建自己的cookie處理程序或選擇js cookie之類的庫

• 字符串需要序列化和反序列化

• 存儲空間有限

• 除非限制訪問，否則第三方腳本可以檢查cookie

• 侵犯隱私

• 每個HTTP請求和響應都會附加cookie數據，影響性能（存儲50Kb的cookie數據，然后請求10個1字節的文件，將產生1兆字節的帶寬）

缺點過多，不是必要不推薦使用cookie

window.name

27.png

window.name設置并獲取窗口瀏覽上下文的名稱。我們可以設置一個字符串值，該值在瀏覽器刷新或鏈接到其他位置并單擊“上一步”之間保持不變。例如：

28.png

檢查該內容：

29.png

優勢

• 易于使用

• 只能用于會話數據

缺點

• 字符串需要序列化和反序列化

• 其他域中的頁面可以讀取、修改或對數據進行刪除

window.name的設計之初并不作為數據存儲的方法，可作為一個黑科技使用。

WebSQL

30.png

WebSQL是將SQL的數據庫存儲引入瀏覽器的方法。示例代碼：

31.png

優勢

• 更適用強健的客戶端數據存儲和訪問

• 服務器端使用SQL語法

缺點

• 瀏覽器支持有限

• 跨瀏覽器的SQL語法不一致

• 異步回調API不夠靈活

• 性能差

可以結合數據庫使用，也為客戶端存儲提供一種方法。

總結

本文詳細為大家介紹了10種不同客戶端存儲的解決方法，可以看到的是，沒有一種方法是十全十美的。為了解決復雜web應用程序中的不同情況，我們需要學習更多API才行。根據不同情況因地制宜，靈活運用將會更加高效的解決問題。

如果覺得這篇文章還不錯? ?點擊下面卡片關注我

來個【分享、點贊、在看】三連支持一下吧

???“分享、點贊、在看” 支持一波?

總結

以上是生活随笔為你收集整理的萌新必看—10种前端存储哪家强，一文读尽！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。