10個客戶端存儲選項以及何時使用它們

瀏覽器數據存儲與操作，也稱為客戶端存儲，在無需或無法將數據發送到Web服務器時非常有用。

瀏覽器數據存儲和操作的場景包括：

• 保持客戶端應用程序的狀態——例如當前屏幕、輸入的數據、用戶偏好等。
• 訪問本地數據或文件且具有嚴格隱私要求的實用程序。
• 可離線工作的漸進式Web應用程序 (PWA)。

以下是十種瀏覽器數據存儲選項：

1. JavaScript變量
2. DOM節點存儲
3. Web存儲 (localStorage 和 sessionStorage)
4. IndexedDB
5. 緩存API（不要使用AppCache！）
6. 文件系統訪問API
7. 文件和目錄條目API
8. cookie
9. window.name
10. WebSQL

本文將探討這十種不同的瀏覽器數據存儲方式，涵蓋它們的限制、優缺點以及每種技術的最佳用途。

在瀏覽這些選項之前，先快速了解一下數據持久性……

關鍵要點

• JavaScript變量：臨時數據最快，但在頁面刷新時會被清除；最適合不需要持久保存超過當前頁面查看的數據。
• DOM節點存儲：在速度和持久性方面與JavaScript變量類似，但允許在HTML元素中存儲狀態；用於組件特定狀態。
• Web存儲 (localStorage 和 sessionStorage)：適合持久存儲少量數據 (localStorage) 或按會話存儲數據 (sessionStorage)；由於同步操作，不適合大型數據集。
• IndexedDB：最適合需要持久保存的大量結構化數據；支持事務和索引，但API複雜。
• 緩存API：理想情況下，用於在PWA中存儲網絡響應以供離線使用；現代API，但僅限於網絡數據，不適合通用狀態存儲。
• cookie：對於必須與HTTP請求一起發送的小型數據很有用；具有良好的持久性，但容量有限且可能存在安全問題。

數據持久性

通常，您存儲的數據將是：

1. 持久性：它會一直保留，直到您的代碼選擇刪除它，或者
2. 易失性：它會一直保留，直到瀏覽器會話結束，通常是在用戶關閉選項卡時。

實際情況更為細緻。

持久性數據可能隨時被用戶、操作系統、瀏覽器或插件阻止或刪除。當瀏覽器接近分配給該存儲類型的容量時，它可能會決定刪除較舊或較大的項目。

瀏覽器還會記錄頁面狀態。您可以從網站導航離開，然後單擊後退或關閉並重新打開選項卡；頁面應該看起來相同。被視為僅限會話的變量和數據仍然可用。

1. JavaScript變量

指標 說明 容量沒有嚴格限制，但當您填充內存時，瀏覽器可能會變慢或崩潰讀取/寫入速度最快的選項持久性差：數據會被瀏覽器刷新清除在JavaScript變量中存儲狀態是最快速和最簡單的選項。我相信您不需要示例，但是……

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

優點：

• 易於使用
• 快速
• 不需要序列化或反序列化

缺點：

• 易碎：刷新或關閉選項卡會清除所有內容
• 第三方腳本可以檢查或覆蓋全局（窗口）值

您已經在使用變量了。您可以在頁面卸載時考慮永久存儲變量狀態。

2. DOM節點存儲

指標 說明 容量沒有嚴格限制，但不適合大量數據讀取/寫入速度快持久性差：數據可能被其他腳本或刷新清除大多數DOM元素（在頁面上或內存中）都可以在命名屬性中存儲值。使用以data-為前綴的屬性名稱更安全：

1. 屬性將永遠不會具有關聯的HTML功能
2. 您可以通過dataset屬性訪問值，而不是更長的.setAttribute()和.getAttribute()方法。

值存儲為字符串，因此可能需要序列化和反序列化。例如：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

優點：

• 您可以在JavaScript或HTML中定義值——例如
• 有助於存儲特定組件的狀態
• DOM很快！ （與流行的觀點相反）

缺點：

• 易碎：刷新或關閉選項卡會清除所有內容（除非值是服務器渲染到HTML中的）
• 僅限字符串：需要序列化和反序列化
• 更大的DOM會影響性能
• 第三方腳本可以檢查或覆蓋值

DOM節點存儲比變量慢。在將組件的狀態存儲在HTML中很實用的情況下，請謹慎使用它。

3. Web存儲 (localStorage 和 sessionStorage)

指標 說明 容量每個域5MB讀取/寫入速度同步操作：可能很慢持久性數據保留到被清除為止Web存儲提供兩個類似的API來定義名稱/值對。使用：

1. window.localStorage存儲持久性數據，以及
2. window.sessionStorage在瀏覽器選項卡保持打開狀態時保留僅限會話的數據（但請參見數據持久性）

使用.setItem()存儲或更新命名項：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

使用.getItem()檢索它們：

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

使用.removeItem()刪除它們：

<code class="language-javascript">localStorage.removeItem('state')</code>

其他屬性和方法包括：

• .length：存儲的項目數
• .key(N)：第N個鍵的名稱
• .clear()：刪除所有存儲的項目

更改任何值都會在連接到同一域的其他瀏覽器選項卡/窗口中引發存儲事件。您的應用程序可以相應地做出響應：

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

優點：

• 簡單的名稱/值對API
• 會話和持久性存儲選項
• 良好的瀏覽器支持

缺點：

• 僅限字符串：需要序列化和反序列化
• 沒有事務、索引或搜索的非結構化數據
• 同步訪問會影響大型數據集的性能

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

4. IndexedDB

指標 說明 容量取決於設備。至少1GB，但最多可以達到剩餘磁盤空間的60%讀取/寫入速度快持久性數據保留到被清除為止IndexedDB提供了一個類似NoSQL的低級API，用於存儲大量數據。該存儲可以被索引，可以使用事務更新，並可以使用異步方法搜索。

IndexedDB API 複雜，需要一些事件處理。以下函數在傳遞名稱、版本號和可選升級函數（在版本號更改時調用）時打開數據庫連接：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

以下代碼連接到myDB數據庫並初始化todo對象存儲（類似於SQL表或MongoDB集合）。然後它定義一個名為id的自動遞增鍵：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

一旦db連接準備就緒，您就可以在一個事務中.add新的數據項：

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

您可以檢索值，例如第一個項目：

<code class="language-javascript">localStorage.removeItem('state')</code>

優點：

• 具有最大空間的靈活數據存儲
• 強大的事務、索引和搜索選項
• 良好的瀏覽器支持

缺點：

• 一個複雜的基於回調和事件的API

IndexedDB是可靠存儲大量數據的最佳選擇，但是您需要使用一個包裝庫，例如idb、Dexie.js或JsStore。

5. 緩存API

指標 說明 容量取決於設備，但Safari將每個域限制為50MB讀取/寫入速度快持久性數據保留到被清除或在Safari中兩週後為止緩存API提供HTTP請求和響應對像對的存儲。您可以創建任意數量的命名緩存來存儲任意數量的網絡數據項。

該API通常用於服務工作程序中，用於緩存漸進式Web應用程序的網絡響應。當設備斷開網絡連接時，可以重新提供緩存的資產，以便Web應用程序可以離線運行。

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

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

類似的函數可以從緩存中檢索項目。在此示例中，它返迴響應正文文本：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

優點：

• 存儲任何網絡響應
• 可以提高Web應用程序的性能
• 允許Web應用程序離線運行
• 現代基於Promise的API

缺點：

• 不適合存儲應用程序狀態
• 可能在漸進式Web應用程序之外不太有用
• Apple對PWA和緩存API並不友好

緩存API是存儲從網絡檢索的文件和數據的最佳選擇。您可能可以使用它來存儲應用程序狀態，但它並非為此目的而設計，並且還有更好的選擇。

5.5 AppCache

AppCache是緩存API已失效的前身。這不是您要尋找的存儲解決方案。這裡沒有什麼好看的。請離開。

6. 文件系統訪問API

指標 說明 容量取決於剩餘磁盤空間讀取/寫入速度取決於文件系統持久性數據保留到被清除為止文件系統訪問API允許瀏覽器讀取、寫入、修改和刪除本地文件系統中的文件。瀏覽器在沙盒環境中運行，因此用戶必須向特定文件或目錄授予權限。這將返回一個FileSystemHandle，以便Web應用程序可以像桌面應用程序一樣讀取或寫入數據。

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

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

優點：

• Web應用程序可以安全地讀取和寫入本地文件系統
• 減少了上傳文件或在服務器上處理數據的需求
• 漸進式Web應用程序的一項很棒的功能

缺點：

• 瀏覽器支持最少（僅限Chrome）
• API可能會更改

這個存儲選項最讓我興奮，但是您需要再等幾年才能將其用於生產環境。

7. 文件和目錄條目API

指標 說明 容量取決於剩餘磁盤空間讀取/寫入速度未知持久性數據保留到被清除為止文件和目錄條目API提供一個可用於域的沙盒文件系統，該系統可以創建、寫入、讀取和刪除目錄和文件。

優點：

• 可能有一些有趣的用途

缺點：

• 非標準的、實現之間的不兼容性，以及行為可能會改變。

MDN明確指出：不要在生產網站上使用此功能。廣泛的支持至少還需要幾年時間。

8. cookie

指標 說明 容量每個域80Kb（20個cookie，每個cookie最多4Kb）讀取/寫入速度快持久性好：數據保留到被清除或過期為止cookie是特定於域的數據。它們以跟踪人的聲譽而聞名，但對於任何需要維護服務器狀態的系統（例如登錄）來說，它們都是必不可少的。與其他存儲機制不同，cookie通常在每個HTTP請求和響應中在瀏覽器和服務器之間傳遞。兩台設備都可以檢查、修改和刪除cookie數據。

document.cookie在客戶端JavaScript中設置cookie值。您必須定義一個字符串，其中名稱和值用等號（=）分隔。例如：

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

值不能包含逗號、分號或空格，因此可能需要encodeURIComponent()：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

可以使用分號分隔符附加其他cookie設置，包括：

• ;domain=: 如果未設置，則cookie僅在當前URL域中可用。使用;path=mysite.com允許在mysite.com的任何子域上使用它。
• ;path=: 如果未設置，則cookie僅在當前路徑及其子路徑中可用。將;path=/設置為允許域中的任何路徑。
• ;max-age=: cookie到期時間（秒）——例如;max-age=60。
• ;expires=: cookie到期日期——例如;expires=Thu, 04 July 2021 10:34:38 UTC（使用date.toUTCString()進行適當的格式化）。
• ;secure: cookie將僅通過HTTPS傳輸。
• ;HTTPOnly: 使cookie無法訪問客戶端JavaScript。
• ;samesite=: 控制另一個域是否可以訪問cookie。將其設置為lax（默認值，將cookie共享到當前域）、strict（阻止在從另一個域遵循鏈接時發送初始cookie）或none（無限制）。

示例：設置一個在10分鐘後過期的狀態cookie，並且可在當前域的任何路徑中使用：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

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

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

下面的函數解析字符串並將其轉換為包含名稱-值對的對象。例如：

<code class="language-javascript">localStorage.removeItem('state')</code>

優點：

• 在客戶端和服務器之間保留狀態的可靠方法
• 僅限於域和（可選）路徑
• 使用max-age（秒）或Expires（日期）進行自動到期控制
• 默認情況下在當前會話中使用（設置到期日期以使數據持久保存超過頁面刷新和選項卡關閉）

缺點：

• cookie經常被瀏覽器和插件阻止（它們通常轉換為會話cookie，以便網站繼續工作）
• 笨拙的JavaScript實現（最好創建您自己的cookie處理程序或選擇js-cookie之類的庫）
• 僅限字符串（需要序列化和反序列化）
• 存儲空間有限
• cookie可以被第三方腳本檢查，除非您限制訪問
• 被指責侵犯隱私（區域立法可能要求您顯示非必要cookie的警告）
• cookie數據附加到每個HTTP請求和響應中，這可能會影響性能（存儲50Kb的cookie數據，然後請求十個1字節的文件，將產生一百萬字節的帶寬）

除非沒有可行的替代方案，否則避免使用cookie。

9. window.name

指標 說明 容量變化，但應該可以容納幾兆字節讀取/寫入速度快持久性會話數據保留到選項卡關閉為止window.name屬性設置和獲取窗口瀏覽上下文的名稱。您可以設置一個在瀏覽器刷新或鏈接到其他位置並單擊後退之間持久存在的單個字符串值。例如：

<code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>

使用以下方法檢查值：

<code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>

優點：

• 易於使用
• 可用於僅限會話的數據

缺點：

• 僅限字符串：需要序列化和反序列化
• 其他域中的頁面可以讀取、修改或刪除數據（切勿將其用於敏感信息）

window.name從未設計用於數據存儲。這是一個技巧，並且有更好的選擇。

10. WebSQL

指標 說明 容量每個域5MB讀取/寫入速度緩慢持久性數據保留到被清除為止WebSQL是將類似SQL的數據庫存儲引入瀏覽器的嘗試。示例代碼：

<code class="language-javascript">localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));</code>

Chrome和某些版本的Safari支持這項技術，但Mozilla和Microsoft反對它，轉而支持IndexedDB。

優點：

• 專為強大的客戶端數據存儲和訪問而設計
• 服務器端開發人員經常使用的熟悉的SQL語法

缺點：

• 瀏覽器支持有限且存在錯誤
• 瀏覽器之間的SQL語法不一致
• 異步但笨拙的基於回調的API
• 性能差

不要使用WebSQL！自2010年規範被棄用以來，它一直不是一個可行的選擇。

仔細檢查存儲

Storage API可以檢查Web存儲、IndexedDB和緩存API可用的空間。除Safari和IE之外的所有瀏覽器都支持基於Promise的API，該API提供.estimate()方法來計算配額（域可用的空間）和使用情況（已使用的空間）。例如：

<code class="language-javascript">const state = JSON.parse( localStorage.getItem('state') );</code>

還有另外兩種異步方法可用：

• .persist()：如果站點有權存儲持久性數據，則返回true，
• .persisted()：如果站點已存儲持久性數據，則返回true。

瀏覽器開發者工具（在Firefox中名為Storage）中的應用程序面板允許您查看、修改和清除localStorage、sessionStorage、IndexedDB、WebSQL、cookie和緩存存儲。

您還可以通過單擊開發者工具的“網絡”面板中的任何項目來檢查HTTP請求和響應標頭中發送的cookie數據。

存儲大雜燴

這些存儲解決方案都不完美，您需要在復雜的Web應用程序中採用多種解決方案。這意味著學習更多API。但是，在每種情況下都有選擇是一件好事——當然，假設您可以選擇合適的選項！

關於本地存儲替代方案的常見問題

我可以用什麼代替本地存儲？

在尋找Web開發中本地存儲的替代方案時，可以考慮會話存儲、cookie和IndexedDB等選項。會話存儲為頁面會話期間提供臨時存儲，而cookie是與每個HTTP請求一起發送的小型數據片段，可用於會話管理和存儲有限的數據。 IndexedDB為在客戶端存儲結構化數據提供更強大的解決方案，使其適合需要異步數據檢索的應用程序。 對於更廣泛的數據存儲或當安全性和持久性至關重要時，服務器端存儲解決方案（如MySQL、PostgreSQL、MongoDB）或基於雲的數據庫（如Firebase、AWS DynamoDB或Google Cloud Firestore）可能更可取。此外，一些客戶端框架提供自己的狀態管理解決方案，而服務工作者可以緩存數據和資產以實現離線功能，使其適合漸進式Web應用程序 (PWA)。

什麼時候不應該使用本地存儲？

本地存儲是一種通用的客戶端存儲解決方案，但在某些情況下，它可能不是最合適的選擇。首先，本地存儲不適合存儲敏感或機密信息，因為它缺乏加密或安全措施，使其容易受到未經授權的訪問。密碼或個人身份等關鍵數據應使用強大的安全協議安全地存儲在服務器端。 其次，本地存儲的容量有限，每個域通常約為5-10 MB。它不適合需要處理大量數據的應用程序。在這種情況下，應考慮服務器端數據庫或更強大的客戶端選項（如IndexedDB）來容納更大的數據集。 最後，本地存儲可能會導致性能問題，尤其是在處理大量數據集時，因為它同步運行並且可能會阻塞主線程。對於性能關鍵型應用程序，可以使用異步存儲解決方案（如IndexedDB）或實現內存緩存來維持流暢的用戶體驗。 總而言之，雖然本地存儲對於輕量級、非敏感的數據存儲很有價值，但必須評估項目的具體要求。對於敏感信息、大型數據集或性能關鍵型應用程序，應探索替代存儲解決方案，以確保數據安全、可擴展性和最佳用戶體驗。

localStorage和sessionStorage哪個更好？

localStorage和sessionStorage的選擇主要取決於您所需的數據持久性持續時間和您的具體用例。 當您需要數據在瀏覽器會話之間持久保存時，localStorage是更好的選擇。它適合存儲用戶偏好、設置或緩存資源等數據，即使用戶關閉瀏覽器並在稍後返回網站，這些數據也應保留給用戶。它的持久性和更大的存儲容量使其非常適合需要長期數據保留的場景。 另一方面，sessionStorage非常適合僅在當前頁面會話期間可用的數據。當用戶關閉選項卡或瀏覽器時，數據會自動清除，從而確保隱私並降低無意中存儲不必要信息的風險。這使其非常適合管理臨時數據，例如表單數據、購物車內容或單個用戶交互中的狀態管理。

什麼是客戶端數據庫？

客戶端數據庫，也稱為前端數據庫，是一種駐留在Web應用程序客戶端（通常在用戶的Web瀏覽器中）並在此運行的數據庫。它用於在客戶端設備上存儲和管理數據，允許Web應用程序離線工作，減少服務器負載，並通過最大限度地減少對頻繁服務器請求的需求來改善用戶體驗。客戶端數據庫通常用於Web開發中，以便直接在用戶的設備上存儲和檢索數據。 客戶端數據庫最常見的示例之一是IndexedDB，這是一個低級JavaScript API，它提供了一個結構化數據庫，用於在Web瀏覽器中存儲大量數據。 IndexedDB允許開發人員創建、讀取、更新和刪除數據，使其適合需要離線存儲和管理大量信息的應用程序。 客戶端數據庫的其他示例包括用於存儲少量數據的Web存儲（localStorage和sessionStorage），以及在JavaScript中實現的各種內存數據庫，用於在用戶會話期間進行臨時數據存儲。 客戶端數據庫對於漸進式Web應用程序 (PWA) 等Web應用程序特別有用，在這些應用程序中，即使用戶離線或互聯網連接有限，也需要保持功能。它們通過提供在用戶設備上本地存儲數據的機制來補充服務器端數據庫，從而減少延遲並增強用戶體驗。

客戶端存儲有哪些不同類型？

Web開發中的客戶端存儲有多種形式，每種形式都有其自身的特性和用例。 一種常見的類型是Web存儲，其中包括localStorage和sessionStorage。 localStorage適合存儲需要跨瀏覽器會話持久保存的小量數據，使其適用於用戶偏好或設置。相反，sessionStorage是會話受限的，僅在單個頁面會話期間存儲數據，使其非常適合臨時數據，例如用戶與網頁交互期間所需的購物車內容或表單數據。 另一種選擇是IndexedDB，這是一種更高級的客戶端數據庫系統。 IndexedDB提供結構化存儲，用於在用戶的設備上管理大量數據。它支持異步數據檢索、索引、事務等等，使其非常適合需要復雜數據處理和離線功能（如漸進式Web應用程序 (PWA)）的應用程序。 此外，cookie是可以存儲在客戶端設備上並與每個HTTP請求一起發送到服務器的小型數據片段。雖然如今不太常用於一般數據存儲，但cookie仍然可用於會話管理、用戶身份驗證和跟踪用戶偏好等任務。 每種類型的客戶端存儲都有其優缺點，選擇取決於您的具體要求，例如數據大小、持久性需求和用例。

以上是10個客戶端存儲選項以及何時使用它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！