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