萌新必看——10種客戶端存儲哪家強，一文讀盡！

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：//www.sitepoint.com/client-side-storage-options-comparison/

數據持久

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

使用場景

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

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

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

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

  • JavaScript變量

  • DOM節點（DOM node）存儲

  • Web存儲（localStorage和sessionStorage）

  • IndexedDB/索引數據-

  • Cache API（不使用AppCache）

  • 文件系統訪問API

  • 文件和目錄項API

  • cookies

  • window.name

  • WebSQL

總體比較

1.1.png

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

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

2.png

優勢

  • 易於使用

  • 快捷

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

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

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

2.DOM節點（DOM node）存儲

3.png

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

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

4.png

優勢

  • 可以在JavaScript或HTML中定義值，例如

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

  • DOM速度過快
    缺點

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

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

  • 較大的DOM會影響性能

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

3.Web存儲（localStorage和sessionStorage）

5.png

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

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

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

6.png
使用.getItem方法進行檢索：

7.png
使用.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之類的包裝器庫。
  1. 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是存儲從網絡檢索的文件和數據的最佳選擇。我們可以使用它來存儲應用程序狀態。

  1. 文件系統訪問API

18.png

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

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

19.png

優勢

  • web應用程序可以安全地讀取和寫入本地文件
  • 不需要在服務器上上傳文件或處理數據
    缺點
  • 只有最低限度的瀏覽器支持（僅限Chrome）
  • API會發生更改

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

  1. 文件和目錄項API

20.png

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

  • 存在一些可探索的有趣用法
    缺點
  • 實現和行為之間的非標準、不兼容可能會改變

不過目前MDN明確聲明：不要在生產站點上使用此選項，技術廣泛的支持還需要幾年。
8. 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

  1. window.name

27.png

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

28.png

檢查該內容：

29.png

優勢

  • 易於使用
  • 只能用於會話數據
    缺點
  • 字符串需要序列化和反序列化
  • 其他域中的頁面可以讀取、修改或對數據進行刪除

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

30.png

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

31.png

優勢

  • 更適用強健的客戶端數據存儲和訪問
  • 服務器端使用SQL語法
    缺點
  • 瀏覽器支持有限
  • 跨瀏覽器的SQL語法不一致
  • 異步回調API不夠靈活
  • 性能差

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

總結

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

Tags:

VirMach 便宜 VPS

QNews

QNews