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

葡萄城技術團隊發表於2021-06-09
客戶端

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：https://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才行。根據不同情況因地制宜，靈活運用將會更加高效的解決問題。

相關文章