瀏覽器端儲存資料的終極指南

banq發表於2022-02-04
瀏覽器

如果您需要以有保證的永續性儲存資料，那麼您需要在後端使用某種型別的資料庫。
如果您不需要永續性保證，那麼有時將資料儲存在客戶端（在使用者的瀏覽器中）是一個更可行的選擇。其他時候，可能必須使用瀏覽器端儲存。
點選標題是原文，它談了：
  • 當前選項 - 您現在可以在所有現代和大多數舊瀏覽器中使用的 API
  • 未來選項 - 尚未完全支援瀏覽器的 API
  • 過去的選項 - 您應該避免的已棄用 API

這是摘要：
 

當前選項

  • 網路儲存

Web Storage API允許您儲存鍵/值對。
您可以將 localStorage 用於持久資料，將 sessionStorage 用於臨時會話資料。
瀏覽器將每個域限制為 5 兆位元組，並且讀/寫操作是同步的，因此它們可以延遲其他 JavaScript 程式。
Web 儲存也是純字串的，因此您可能必須對資料進行序列化/反序列化。
此外，儲存大型資料集會影響頁面效能（因為操作是同步的）。
 

  • 索引資料庫

IndexedDB API用於儲存大量結構化資料。
資料儲存限制非常大（如果存在的話），但各種瀏覽器處理限制和資料驅逐的方式不同。
IndexedDB 為您提供了一個類似 NoSQL 的鍵/值資料庫，您的值可以是複雜的結構化物件。
每個 IndexedDB 對一個源來說都是唯一的，因此任何其他源都不能訪問它。
API 使用資料庫索引來實現對資料的快速搜尋（因此稱為Indexed DB）。
API 大部分是非同步的（你必須傳遞迴調函式），它建立在事務資料庫模型上。事務是原子的，但IndexedDB 不提供事務隔離保證（針對多個選項卡中的併發事務）。
IndexedDB 的主要缺點是 API 很差。
但是，您可以使用 idb 之類的包裝器使其可用（這是大多數開發人員所做的）。
 

  • Cookie

嚴格來說，cookie 不是客戶端儲存選項，因為瀏覽器和後端伺服器都可以修改 cookie。
但是，cookie 是最流行的瀏覽器端儲存選項之一，它們對於任何維護伺服器/瀏覽器狀態的系統（例如登入）都是必不可少的。
一個域可以儲存不超過 20 個命名 cookie，每個最大字串為 4 KB。
這是一個 80 KB 的限制性限制，但這是因為每個 HTTP 請求和響應都會傳送 cookie 資料。
但是，cookie 的一些缺點（除了有限的儲存空間）包括
  1. 需要字串序列化和反序列化
  2. 瀏覽器和外掛可以阻止 cookie
  3. 法律要求（您可能需要選擇加入或警告）

 
  • 快取 API

快取 API 儲存 HTTP 請求和響應物件。
它主要用於 PWA 快取網路響應，以便應用可以在離線時提供快取的響應。
Cache API 對於儲存其他型別的資料並不實用。
基於 Chrome 的瀏覽器通常允許每個域 100 兆位元組，但 Safari 將其限制為 50 兆位元組並在 14 天后驅逐快取。
 

過去的選擇

  • WebSQL

WebSQL 為瀏覽器帶來了類似 SQL 的資料庫儲存，任何瞭解 SQL 的人都可以使用它。
然而，Chrome 和 Safari 提供了各種不一致的 WebSQL 實現，而 Mozilla 和微軟反對它，支援 IndexedDB。
API 在 2010 年被棄用。
  • 應用快取

AppCache 是 Cache API 的前身。
它試圖在純文字清單檔案中指定快取行為，但圍繞 AppCache 存在許多問題和陷阱，可能會破壞您的網站。

相關文章