萌新必看——10种客户端存储哪家强，一文读尽！
轉載請注明出處： 葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
數據持久
數據持久指將內存中的數據模型轉化為存儲模型，和將存儲模型轉化為內存中的數據模型這一過程的統稱。在普通情況下，我們存儲的數據會一直保留，直到我們刪除相關內容；或者是這些數據保存到瀏覽器會話結束，用戶關閉之后。
但在實際情況中會更加復雜一些。用戶、操作系統、瀏覽器或插件都可以隨時阻止或刪除持久數據。瀏覽器有權限刪除存儲內容比較陳舊或者是比較大的項目內容；還能記錄頁面狀態，當我們離開當前頁面，重新打開頁面的時候上次記錄的內容會得到保存記錄，可以直接使用。
使用場景
當數據并不需要發送到web服務器或者并不需要數據內容時，只需要在瀏覽器中存儲和操作數據（也叫客戶端）會用到數據持久，而需要在瀏覽器中存儲和操作數據具體包括以下幾種情況：
-
保留客戶端應用程序的狀態—例如當前屏幕、輸入的數據、用戶首選項等
-
訪問本地數據或文件并有嚴格隱私要求的實用程序
-
脫機工作的漸進式web應用程序（PWA）
接下來將為大家詳細比較10中不同的客戶端存儲方式，包括這些方法的限制、優缺點以及每種方式的使用，方便大家選擇根據自己的使用場景進行選擇。 -
JavaScript變量
-
DOM節點（DOM node）存儲
-
Web存儲（localStorage和sessionStorage）
-
IndexedDB/索引數據-
-
Cache API（不使用AppCache）
-
文件系統訪問API
-
文件和目錄項API
-
cookies
-
window.name
-
WebSQL
總體比較
文本將從容量、讀寫速度、數據持久三個角度進行比較這十種方式，接下來為大家介紹詳細內容。
將狀態存儲在JavaScript變量中是最快、最簡單的，例子如下：
優勢
-
易于使用
-
快捷
-
不需要序列化或反序列化
缺點 -
易失：刷新或者關閉標簽會清除所有內容
-
第三方腳本可以檢查或覆蓋全局（窗口）值
如果你已經在使用JS變量，可以考慮在page unloads時永久存儲變量狀態
2.DOM節點（DOM node）存儲
大多數DOM元素，無論是在頁面上還是在內存中，都可以在命名屬性中存儲值。使用以data-為前綴的屬性名稱更安全：
- 該屬性不會關聯HTML
- 可以通過數據集屬性而不是較長的.setAttribute和.getAttribute方法訪問值存儲為字符串，因此可能需要序列化和反序列化。例如：
優勢
-
可以在JavaScript或HTML中定義值，例如
-
用于存儲特定組件的狀態
-
DOM速度過快
缺點 -
易碎：刷新或關閉當前內容會清除所有內容（除非服務器將值傳遞到HTML中）
-
字符串需要序列化和反序列化
-
較大的DOM會影響性能
-
第三方腳本可以檢查或覆蓋值
DOM節點存儲比變量慢。在將組件的狀態存儲在HTML中是可行的情況下，使用的時候需要注意這一點。現在這種方式已經被逐漸淘汰，原因是DOM節點生成樹的存儲速度過慢，在大型項目中的效率十分低下。不過為了解決這個問題現在HTML 5的Canvas已有了詳盡的解決方案， 比如SpreadJS純前端表格組件已經引入了Canvas繪制模型和雙緩存畫布技術，使項目效率大大提升。
3.Web存儲（localStorage和sessionStorage）
Web存儲提供了兩個類似的api來定義名稱/值對：
- window.localStorage：存儲持久數據
?- window.sessionStorage：在瀏覽器選項內容保持打開狀態時僅保留會話數據
使用.setItem方法存儲或更新命名項：
使用.getItem方法進行檢索：
使用.removeItem方法刪除：
優勢
- 簡單名稱/值對API
- 有會話和持久存儲選項
- 良好的瀏覽器支持
缺點 - 僅字符串：需要序列化和反序列化
- 無事務、索引或搜索的非結構化數據
- 同步訪問將影響大型數據集的性能
Web存儲非常適合于更簡單、更小、特別的值。存儲大量結構化信息不太實用，但是我們可以通過在頁面卸載時寫入數據來避免性能問題。
4.IndexedDB/索引數據庫
IndexedDB提供了一個類似NoSQL的低級API來存儲大量數據。可以進行索引存儲，使用事務更新存儲，并使用異步方法搜索存儲。
IndexedDBapi很復雜，需要一些事件處理。以下函數在傳遞名稱、版本號和可選升級函數（在版本號更改時調用）時打開數據庫連接：
下面內容連接到myDB數據庫并初始化todo對象存儲（類似于SQL表或MongoDB集合）。然后定義一個名為id的自動遞增鍵：
數據庫連接就緒后，可以在事務中添加新數據項：
此時可以檢索值
優勢
- 具有最大空間的靈活數據存儲
- 強大的事務、索引和搜索選項
- 良好的瀏覽器支持
缺點 - 回調復雜，API基于事件
- IndexedDB可以存儲大量數據，但需要使用諸如idb、Dexie.js或JsStore之類的包裝器庫。
Cache API為HTTP請求和響應對象對提供存儲。您可以創建任意數量的命名緩存來存儲任意數量的網絡數據項。
API通常對緩存漸進式web應用進行網絡響應。當設備與網絡斷開連接時，重新提供緩存內容，以便web應用程序可以脫機運行。
以下代碼將網絡響應存儲在名為myCache的緩存中：
類似的函數可以從緩存中檢索項。下面的例子中，它返回響應正文文本：
優勢
- 存儲任何網絡響應
- 可以提高web應用程序性能
- 允許web應用程序脫機運行
- 基于Promise的現代API
缺點 - 不適用于存儲應用程序狀態
- 在漸進式web應用程序之外不太有用
- 蘋果對PWAs和Cache API并不友好
Cache API是存儲從網絡檢索的文件和數據的最佳選擇。我們可以使用它來存儲應用程序狀態。
文件系統訪問API允許瀏覽器從本地文件系統讀取、寫入、修改和刪除文件。瀏覽器在沙盒環境中運行，因此用戶必須授予對特定文件或目錄的權限。這將返回一個FileSystemHandle，以便web應用程序可以像桌面應用程序一樣讀取或寫入數據。
以下函數將Blob保存到本地文件：
優勢
- web應用程序可以安全地讀取和寫入本地文件
- 不需要在服務器上上傳文件或處理數據
缺點 - 只有最低限度的瀏覽器支持（僅限Chrome）
- API會發生更改
這種儲存方式的優勢幾乎是壓倒性的
文件和目錄條目API提供了一個可用于域的文件系統，該系統可以創建、寫入、讀取和刪除目錄和文件。
優勢
- 存在一些可探索的有趣用法
缺點 - 實現和行為之間的非標準、不兼容可能會改變
不過目前MDN明確聲明：不要在生產站點上使用此選項，技術廣泛的支持還需要幾年。
8. cookies
Cookie是特定于域的數據，用來跟蹤用戶，但對于任何需要維護服務器狀態的系統（如登錄）來說，它們都是必不可少的。與其他存儲機制不同的是，cookies（通常）在瀏覽器和服務器之間的HTTP請求和響應上傳遞。兩個設備都可以檢查、修改和刪除cookie數據。
使用document.cookie在客戶端中設置cookie值，使用方法：
值不能包含逗號、分號或空格，所以需要 encodeURIComponent方法：
示例：設置一個狀態cookie，該cookie將在10分鐘后過期，并且在當前域中的任何路徑上都可用：
document.cookie返回一個字符串，其中包含由分號分隔的每個名稱和值對。例如：
下面的函數解析字符串并將其轉換為包含name-value的對象。例如：
優勢
- 可在在客戶機和服務器之間保留數據狀態
- 僅限于域和路徑（可選）
- 自動過期控制，最大過期時間（秒）或過期時間（日期）
- 默認情況下在當前會話中使用（設置過期日期，可以在頁面刷新和標簽關閉之后保留數據）
缺點 - 瀏覽器和插件會阻止Cookie（它們通常被轉換為會話Cookie，這樣站點就可以繼續工作）
- JavaScript實現需要創建自己的cookie處理程序或選擇js cookie之類的庫
- 字符串需要序列化和反序列化
- 存儲空間有限
- 除非限制訪問，否則第三方腳本可以檢查cookie
- 侵犯隱私
- 每個HTTP請求和響應都會附加cookie數據，影響性能（存儲50Kb的cookie數據，然后請求10個1字節的文件，將產生1兆字節的帶寬）
缺點過多，不是必要不推薦使用cookie
window.name設置并獲取窗口瀏覽上下文的名稱。我們可以設置一個字符串值，該值在瀏覽器刷新或鏈接到其他位置并單擊“上一步”之間保持不變。例如：
檢查該內容：
優勢
- 易于使用
- 只能用于會話數據
缺點 - 字符串需要序列化和反序列化
- 其他域中的頁面可以讀取、修改或對數據進行刪除
window.name的設計之初并不作為數據存儲的方法，可作為一個黑科技使用。
10. WebSQL
WebSQL是將SQL的數據庫存儲引入瀏覽器的方法。示例代碼：
優勢
- 更適用強健的客戶端數據存儲和訪問
- 服務器端使用SQL語法
缺點 - 瀏覽器支持有限
- 跨瀏覽器的SQL語法不一致
- 異步回調API不夠靈活
- 性能差
可以結合數據庫使用，也為客戶端存儲提供一種方法。
總結
本文詳細為大家介紹了10種不同客戶端存儲的解決方法，可以看到的是，沒有一種方法是十全十美的。為了解決復雜web應用程序中的不同情況，我們需要學習更多API才行。根據不同情況因地制宜，靈活運用將會更加高效的解決問題。
總結
以上是生活随笔為你收集整理的萌新必看——10种客户端存储哪家强，一文读尽！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 红米airdots掉了怎么查找_百元性价
- 下一篇： Zeppelin-在Flink和Spar