後端開發(fā)中，存儲是常見任務(wù)。應(yīng)用程序數(shù)據(jù)存儲在數(shù)據(jù)庫中，文件存儲在對象存儲中，臨時數(shù)據(jù)存儲在緩存中……存儲各種數(shù)據(jù)的方法似乎無窮無盡。但數(shù)據(jù)存儲並不僅限於後端。前端（瀏覽器）也配備了許多存儲數(shù)據(jù)選項。我們可以利用這種存儲來提高應(yīng)用程序性能，保存用戶偏好，跨多個會話甚至不同的計算機保持應(yīng)用程序狀態(tài)。

本文將介紹在瀏覽器中存儲數(shù)據(jù)的不同方法。我們將介紹每種方法的三個用例，以了解其優(yōu)缺點。最後，您將能夠決定哪種存儲最適合您的用例。讓我們開始吧！

localStorage API

localStorage 是瀏覽器中最流行的存儲選項之一，也是許多開發(fā)人員的首選。數(shù)據(jù)跨會話存儲，從不與服務(wù)器共享，並且對於同一協(xié)議和域下的所有頁面都可用。存儲限制為約5MB。

令人驚訝的是，Google Chrome 團隊不建議使用此選項，因為它會阻塞主線程，並且web worker 和service worker 無法訪問它。他們啟動了一個實驗性KV 存儲，作為更好的版本，但這只是一個試驗，似乎還沒有進展。

localStorage API 可作為window.localStorage 使用，並且只能保存UTF-16 字符串。我們必須確保在將數(shù)據(jù)保存到localStorage 之前將其轉(zhuǎn)換為字符串。三個主要函數(shù)是：

• setItem('key', 'value')
• getItem('key')
• removeItem('key')

它們都是同步的，這使得它們易於使用，但它們會阻塞主線程。

值得一提的是，localStorage 有一個名為sessionStorage 的孿生兄弟。唯一的區(qū)別是存儲在sessionStorage 中的數(shù)據(jù)僅在當(dāng)前會話中有效，但API 是相同的。

讓我們看看它的實際應(yīng)用。第一個示例演示如何使用localStorage 存儲用戶的偏好設(shè)置。在本例中，這是一個布爾屬性，用於打開或關(guān)閉我們網(wǎng)站的深色主題。

您可以選中復(fù)選框並刷新頁面以查看狀態(tài)是否跨會話保存。查看保存和加載函數(shù)以了解我如何將值轉(zhuǎn)換為字符串以及如何解析它。重要的是要記住，我們只能存儲字符串。

第二個示例從PokéAPI 加載寶可夢名稱。

我們使用fetch 發(fā)送GET 請求，並在ul 元素中列出所有名稱。收到響應(yīng)後，我們將其緩存到localStorage 中，以便我們的下次訪問可以更快，甚至可以在脫機狀態(tài)下工作。我們必須使用JSON.stringify 將數(shù)據(jù)轉(zhuǎn)換為字符串，並使用JSON.parse 從緩存中讀取它。

在這個最後一個示例中，我演示了一個用例，用戶可以在不同的寶可夢頁面之間瀏覽，並且當(dāng)前頁面會為下次訪問保存。

在這種情況下，localStorage 的問題在於狀態(tài)是本地保存的。此行為不允許我們與朋友共享所需的頁面。稍後，我們將看到如何克服這個問題。

我們還將在接下來的存儲選項中使用這三個示例。我分叉了Pens 並只更改了相關(guān)的函數(shù)。所有方法的整體框架都是相同的。

IndexedDB API

IndexedDB 是瀏覽器中的一種現(xiàn)代存儲解決方案。它可以存儲大量結(jié)構(gòu)化數(shù)據(jù)——甚至文件和blob。像每個數(shù)據(jù)庫一樣，IndexedDB 為高效運行查詢而對數(shù)據(jù)進行索引。使用IndexedDB 更複雜。我們必須創(chuàng)建一個數(shù)據(jù)庫、表並使用事務(wù)。

與localStorage 相比，IndexedDB 需要更多代碼。在示例中，我使用帶有Promise 包裝器的本機API，但我強烈建議使用第三方庫來幫助您。我的建議是localForage，因為它使用相同的localStorage API，但以漸進增強的方式實現(xiàn)它，這意味著如果您的瀏覽器支持IndexedDB，它將使用它；如果不是，它將回退到localStorage。

讓我們編寫代碼，然後轉(zhuǎn)到我們的用戶偏好設(shè)置示例！

idb 是我們用來代替使用低級基於事件的API 的Promise 包裝器。它們幾乎相同，所以不用擔(dān)心。首先要注意的是，每次訪問數(shù)據(jù)庫都是異步的，這意味著我們不會阻塞主線程。與localStorage 相比，這是一個主要優(yōu)勢。

我們需要打開數(shù)據(jù)庫連接，以便它可以在整個應(yīng)用程序中用於讀寫。我們?yōu)閿?shù)據(jù)庫命名為my-db，架構(gòu)版本為1，以及一個更新函數(shù)來應(yīng)用不同版本之間的更改。這與數(shù)據(jù)庫遷移非常相似。我們的數(shù)據(jù)庫模式很簡單：只有一個對象存儲，preferences。對象存儲相當(dāng)於SQL 表。要寫入或讀取數(shù)據(jù)庫，我們必須使用事務(wù)。這是使用IndexedDB 的繁瑣部分。查看演示中的新保存和加載函數(shù)。

毫無疑問，與localStorage 相比，IndexedDB 的開銷要大得多，學(xué)習(xí)曲線也更陡峭。對於鍵值用例，使用localStorage 或幫助我們提高生產(chǎn)力的第三方庫可能更有意義。

應(yīng)用程序數(shù)據(jù)（例如在我們的寶可夢示例中）是IndexedDB 的強項。您可以在這個數(shù)據(jù)庫中存儲數(shù)百兆字節(jié)甚至更多的數(shù)據(jù)。您可以將所有寶可夢存儲在IndexedDB 中，並使它們在脫機狀態(tài)下可用，甚至可以索引！這絕對是存儲應(yīng)用程序數(shù)據(jù)的最佳選擇。

我跳過了第三個示例的實現(xiàn)，因為與localStorage 相比，IndexedDB 在這種情況下沒有任何區(qū)別。即使使用IndexedDB，用戶仍然無法與他人共享所選頁面或?qū)⑵湓O(shè)為書籤以供將來使用。它們都不是此用例的正確選擇。

Cookies

使用cookie 是一種獨特的存儲選項。它是唯一也與服務(wù)器共享的存儲。 cookie 作為每個請求的一部分發(fā)送。當(dāng)用戶瀏覽我們應(yīng)用程序中的頁面或發(fā)送Ajax 請求時，可能會發(fā)生這種情況。這允許我們在客戶端和服務(wù)器之間創(chuàng)建共享狀態(tài)，並在不同子域中的多個應(yīng)用程序之間共享狀態(tài)。本文中描述的其他存儲選項無法做到這一點。一個警告：cookie 會隨每個請求一起發(fā)送，這意味著我們必須保持cookie 的大小以保持合理的請求大小。

cookie 最常見的用途是身份驗證，這不在本文的討論範(fàn)圍之內(nèi)。與localStorage 一樣，cookie 也只能存儲字符串。 cookie 連接成一個以分號分隔的字符串，並在請求的cookie 標(biāo)頭中發(fā)送。您可以為每個cookie 設(shè)置許多屬性，例如過期時間、允許的域、允許的頁面等等。

在示例中，我展示瞭如何通過客戶端操作cookie，但也可以在您的服務(wù)器端應(yīng)用程序中更改它們。

如果服務(wù)器可以以某種方式利用它，那麼在cookie 中保存用戶的偏好設(shè)置可能是一個不錯的選擇。例如，在主題用例中，服務(wù)器可以提供相關(guān)的CSS 文件並減少潛在的包大小（如果我們正在進行服務(wù)器端渲染）。另一個用例可能是跨多個子域應(yīng)用程序共享這些偏好設(shè)置，而無需數(shù)據(jù)庫。

使用JavaScript 讀取和寫入cookie 並不像您想像的那麼簡單。要保存新的cookie，您需要設(shè)置document.cookie——查看上面示例中的保存函數(shù)。我設(shè)置了dark_theme cookie 並為其添加了max-age 屬性，以確保它在標(biāo)籤關(guān)閉時不會過期。此外，我還添加了SameSite 和Secure 屬性。這些是必要的，因為CodePen 使用iframe 來運行示例，但在大多數(shù)情況下您不需要它們。讀取cookie 需要解析cookie 字符串。

cookie 字符串如下所示：

 <code>key1=value1;key2=value2;key3=value3</code>

因此，首先，我們必須用分號分割字符串?，F(xiàn)在，我們有一個key1=value1 形式的cookie 數(shù)組，因此我們需要在數(shù)組中找到正確的元素。最後，我們按等號分割並獲取新數(shù)組中的最後一個元素。有點繁瑣，但是一旦你實現(xiàn)了getCookie 函數(shù)（或者從我的示例中復(fù)制它:P），你就可以忘記它了。

在cookie 中保存應(yīng)用程序數(shù)據(jù)可能是個壞主意！它會大大增加請求大小並降低應(yīng)用程序性能。此外，服務(wù)器無法從這些信息中獲益，因為它已經(jīng)在其數(shù)據(jù)庫中擁有這些信息的陳舊版本。如果您使用cookie，請確保它們保持較小。

分頁示例也不適合cookie，就像localStorage 和IndexedDB 一樣。當(dāng)前頁面是我們希望與他人共享的臨時狀態(tài)，這些方法都不能實現(xiàn)它。

URL 存儲

URL 本身不是存儲，但它是創(chuàng)建可共享狀態(tài)的好方法。實際上，這意味著向當(dāng)前URL 添加查詢參數(shù)，這些參數(shù)可用於重新創(chuàng)建當(dāng)前狀態(tài)。最好的例子是搜索查詢和過濾器。如果我們在CSS-Tricks 上搜索flexbox 術(shù)語，則URL 將更新為http://www.miracleart.cn/link/ada9e980b20ac07f6a938ef15106c224 URL，共享搜索查詢有多容易？另一個優(yōu)點是您可以簡單地點擊刷新按鈕以獲取查詢的較新結(jié)果，甚至可以將其設(shè)為書籤。

我們只能在URL 中保存字符串，並且其最大長度是有限制的，因此我們沒有太多空間。我們將不得不保持我們的狀態(tài)較小。沒有人喜歡又長又嚇人的URL。

同樣，CodePen 使用iframe 來運行示例，因此您無法看到URL 實際上發(fā)生了變化。不用擔(dān)心，因為所有部分都在那裡，所以您可以在任何地方使用它。

我們可以通過window.location.search 訪問查詢字符串，幸運的是，可以使用URLSearchParams 類對其進行解析。不再需要應(yīng)用任何復(fù)雜的字符串解析了。當(dāng)我們想要讀取當(dāng)前值時，我們可以使用get 函數(shù)。當(dāng)我們想要寫入時，我們可以使用set。僅設(shè)置值是不夠的；我們還需要更新URL。這可以使用history.pushState 或history.replaceState 來完成，具體取決於我們想要實現(xiàn)的行為。

我不建議在URL 中保存用戶的偏好設(shè)置，因為我們必須將此狀態(tài)添加到用戶訪問的每個URL，而且我們無法保證；例如，如果用戶點擊Google 搜索中的鏈接。

就像cookie 一樣，我們無法在URL 中保存應(yīng)用程序數(shù)據(jù)，因為我們的空間有限。即使我們設(shè)法存儲它，URL 也會很長，而且不方便點擊。可能看起來像某種網(wǎng)絡(luò)釣魚攻擊。

就像我們的分頁示例一樣，臨時應(yīng)用程序狀態(tài)最適合URL 查詢字符串。同樣，您看不到URL 更改，但是每次點擊頁面時，URL 都會使用?page=x 查詢參數(shù)進行更新。當(dāng)網(wǎng)頁加載時，它會查找此查詢參數(shù)並相應(yīng)地獲取正確的頁面?，F(xiàn)在我們可以與朋友分享這個URL，以便他們可以欣賞我們最喜歡的寶可夢。

Cache API

Cache API 是網(wǎng)絡(luò)級別的存儲。它用於緩存網(wǎng)絡(luò)請求及其響應(yīng)。 Cache API 與service worker 完美契合。 service worker 可以攔截每個網(wǎng)絡(luò)請求，並使用Cache API，它可以輕鬆緩存請求。 service worker 還可以返回現(xiàn)有的緩存項作為網(wǎng)絡(luò)響應(yīng)，而不是從服務(wù)器獲取它。通過這樣做，您可以減少網(wǎng)絡(luò)加載時間，並使您的應(yīng)用程序即使在脫機狀態(tài)下也能工作。最初，它是為service worker 創(chuàng)建的，但在現(xiàn)代瀏覽器中，Cache API 也在window、iframe 和worker 上下文中可用。這是一個非常強大的API，可以極大地改善應(yīng)用程序的用戶體驗。

與IndexedDB 一樣，Cache API 存儲沒有限制，如果您需要，您可以存儲數(shù)百兆字節(jié)甚至更多的數(shù)據(jù)。 API 是異步的，因此它不會阻塞您的主線程。並且可以通過全局屬性caches 訪問它。

要了解有關(guān)Cache API 的更多信息，Google Chrome 團隊製作了一個很棒的教程。

Chris 創(chuàng)建了一個很棒的Pen，其中包含一個結(jié)合了service worker 和Cache API 的實際示例。

打開演示### 附加：瀏覽器擴展

如果您構(gòu)建瀏覽器擴展，則還有另一個存儲數(shù)據(jù)的選項。我在開發(fā)我的擴展daily.dev 時發(fā)現(xiàn)了它。它可以通過chrome.storage 或browser.storage 使用（如果您使用Mozilla 的polyfill）。確保在您的清單中請求存儲權(quán)限才能訪問。

有兩種類型的存儲選項，本地和同步。本地存儲是不言自明的；這意味著它不是共享的，而是本地保留的。同步存儲作為Google 帳戶的一部分同步，您使用同一帳戶安裝擴展程序的任何位置，此存儲都將同步。如果您問我，這是一個很酷的功能。兩者都具有相同的API，因此如果需要，切換起來非常容易。它是異步存儲，因此不會像localStorage 一樣阻塞主線程。不幸的是，我無法為此存儲選項創(chuàng)建演示，因為它需要瀏覽器擴展，但它非常易於使用，幾乎就像localStorage 一樣。有關(guān)確切實現(xiàn)的更多信息，請參閱Chrome 文檔。

結(jié)論

瀏覽器有許多選項可用於存儲我們的數(shù)據(jù)。按照Chrome 團隊的建議，我們的首選存儲應(yīng)該是IndexedDB。它是異步存儲，有足夠的空間來存儲我們想要的一切。不鼓勵使用localStorage，但它比IndexedDB 更易於使用。 cookie 是將客戶端狀態(tài)與服務(wù)器共享的好方法，但主要用於身份驗證。

如果您想創(chuàng)建具有可共享狀態(tài)的頁面（例如搜索頁面），請使用URL 的查詢字符串來存儲此信息。最後，如果您構(gòu)建擴展程序，請務(wù)必閱讀有關(guān)chrome.storage 的信息。

以上是不同類型的瀏覽器存儲的底漆的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！