在后端開(kāi)發(fā)中，存儲(chǔ)是工作的常見(jiàn)部分。應(yīng)用程序數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中，文件存儲(chǔ)在對(duì)象存儲(chǔ)中，瞬態(tài)數(shù)據(jù)存儲(chǔ)在高速緩存中……似乎存在無(wú)限種存儲(chǔ)任何類(lèi)型數(shù)據(jù)的可能性。但是，數(shù)據(jù)存儲(chǔ)不僅限于后端，前端（瀏覽器）還具有許多存儲(chǔ)數(shù)據(jù)的選項(xiàng)。我們可以通過(guò)利用這種存儲(chǔ)方式來(lái)提升我們的應(yīng)用性能，保存用戶(hù)的偏好，在多個(gè)會(huì)話，甚至不同的計(jì)算機(jī)上保持應(yīng)用狀態(tài)。

在本文中，我們將通過(guò)不同的可能性在瀏覽器中存儲(chǔ)數(shù)據(jù)。我們將涵蓋每種方法的三個(gè)用例，以掌握其利弊。最后，你將能夠決定什么存儲(chǔ)是最適合你的用例。

讓我們開(kāi)始吧！

localStorage API

localStorage 是瀏覽器中最受歡迎的存儲(chǔ)選項(xiàng)之一，也是許多開(kāi)發(fā)人員的首選。數(shù)據(jù)跨會(huì)話存儲(chǔ)，從不與服務(wù)器共享，并且可用于同一協(xié)議和域下的所有頁(yè)面。存儲(chǔ)空間限制為?5MB。

令人驚訝的是，谷歌Chrome團(tuán)隊(duì)并不建議使用這個(gè)選項(xiàng)，因?yàn)樗帘瘟酥骶€程，而且web workers和service workers無(wú)法訪問(wèn)。他們推出了一個(gè)實(shí)驗(yàn)：KV Storage，作為一個(gè)更好的版本，但這只是一個(gè)試驗(yàn)，似乎還沒(méi)有任何進(jìn)展。

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

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

它們都是同步的，因此使用起來(lái)很簡(jiǎn)單，但是它們會(huì)阻塞主線程。

值得一提的是，localStorage 有一個(gè)稱(chēng)為 sessionStorage 的雙胞胎。唯一的區(qū)別是，存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)將僅持續(xù)當(dāng)前會(huì)話，但API相同。

這個(gè)太簡(jiǎn)單了，相信大家都用過(guò)。

IndexedDB API

IndexedDB是瀏覽器中的現(xiàn)代存儲(chǔ)解決方案。它可以存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)，甚至文件和Blob。和每一個(gè)數(shù)據(jù)庫(kù)一樣，IndexedDB對(duì)數(shù)據(jù)進(jìn)行索引，以便高效地運(yùn)行查詢(xún)。使用IndexedDB比較復(fù)雜，我們必須創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，表，并使用事務(wù)。

與 localStorage 相比，IndexedDB需要更多代碼。在例子中，我使用了原生API與Promise包裝器，但我強(qiáng)烈建議使用第三方庫(kù)來(lái)幫助你。我推薦的是localForage，因?yàn)樗褂昧送瑯拥?localStorage API，但實(shí)現(xiàn)方式是逐步增強(qiáng)的，也就是說(shuō)，如果你的瀏覽器支持IndexedDB，就會(huì)使用它；如果不支持，就會(huì)退回到 localStorage。

讓我們來(lái)編寫(xiě)代碼，前往我們的用戶(hù)偏好示例吧！

<input type="checkbox" id="darkTheme" name="darkTheme" onclick='onChange(this);'> <label for="darkTheme">Dark theme</label><br>

let db;  function toggle(on) {   if (on) {     document.documentElement.classList.add('dark');    } else {     document.documentElement.classList.remove('dark');       } }  async function save(on) {   const tx = db.transaction('preferences', 'readwrite');   const store = tx.objectStore('preferences');   store.put({key: 'darkTheme', value: on});   return tx.complete; }  async function load() {   const tx = db.transaction('preferences', 'readonly');   const store = tx.objectStore('preferences');   const data = await store.get('darkTheme');   return data && data.value; }  async function onChange(checkbox) {   const value = checkbox.checked;   toggle(value);   await save(value); }  function openDatabase() {   return idb.openDB('my-db', 1, {     upgrade(db) {       db.createObjectStore('preferences', {keyPath: 'key'});     },   }); }  openDatabase()   .then((_db) => {     db = _db;     return load();   })   .then((initialValue) => {     toggle(initialValue);     document.querySelector('#darkTheme').checked = initialValue;   });

效果

idb 是我們使用的Promise包裝器，而不是使用基于事件的低級(jí)API。首先要注意的是，對(duì)數(shù)據(jù)庫(kù)的每次訪問(wèn)都是異步的，這意味著我們不會(huì)阻塞主線程，與 localStorage 相比，這是一個(gè)主要優(yōu)勢(shì)。

我們需要打開(kāi)與數(shù)據(jù)庫(kù)的連接，以便在整個(gè)應(yīng)用程序中都可以使用它進(jìn)行讀寫(xiě)。我們給數(shù)據(jù)庫(kù)起一個(gè)名字 my-db，一個(gè)模式版本 1，以及一個(gè)更新函數(shù)，以在版本之間應(yīng)用更改，這與數(shù)據(jù)庫(kù)遷移非常相似。我們的數(shù)據(jù)庫(kù)架構(gòu)很簡(jiǎn)單：只有一個(gè)object store preferences。object store 等效于SQL表，要寫(xiě)入或讀取數(shù)據(jù)庫(kù)，必須使用事務(wù)，這是使用IndexedDB的乏味部分。看一下演示中新的 save 和 load 功能。

毫無(wú)疑問(wèn)，IndexedDB具有更多的開(kāi)銷(xiāo)，并且與 localStorage 相比，學(xué)習(xí)曲線更陡峭。對(duì)于鍵值的情況，使用 localStorage 或第三方庫(kù)可能更有意義，它們將幫助我們提高效率。

<p id="loading">loading...</p> <ul id="list"> </ul>

let db;  async function loadPokemons() {   const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');   const data = await res.json();   return data.results; }  function removeLoading() {   const elem = document.querySelector('#loading');   if (elem) {     elem.parentNode.removeChild(elem);    } }  function appendPokemon(pokemon) {   const node = document.createElement('li');   const textnode = document.createTextNode(pokemon.name);   node.appendChild(textnode);   document.querySelector('#list').appendChild(node); }  function clearList() {   const list = document.querySelector('#list');   while (list.firstChild) {     list.removeChild(list.lastChild);   } }  function saveToCache(pokemons) {   const tx = db.transaction('pokemons', 'readwrite');   const store = tx.objectStore('pokemons');   pokemons.forEach(pokemon => store.put(pokemon));   return tx.complete; }  function loadFromCache() {   const tx = db.transaction('pokemons', 'readonly');   const store = tx.objectStore('pokemons');   return store.getAll(); }  function openDatabase() {   return idb.openDB('my-db2', 1, {     upgrade(db) {       db.createObjectStore('pokemons', {keyPath: 'name'});     },   }); }  openDatabase()   .then((_db) => {     db = _db;     return loadFromCache();   })   .then((cachedPokemons) => {     if (cachedPokemons) {       removeLoading();       cachedPokemons.forEach(appendPokemon);       console.log('loaded from cache!');     }     return loadPokemons();   })   .then((pokemons) => {     removeLoading();     saveToCache(pokemons);     clearList();     pokemons.forEach(appendPokemon);     console.log('loaded from network!');   });

效果

你可以在此數(shù)據(jù)庫(kù)中存儲(chǔ)數(shù)百兆甚至更多。您可以將所有Pokémon存儲(chǔ)在IndexedDB中，并使其脫機(jī)甚至建立索引！這絕對(duì)是用于存儲(chǔ)應(yīng)用程序數(shù)據(jù)的一種選擇。

我跳過(guò)了第三個(gè)示例的實(shí)現(xiàn)，因?yàn)榕c localStorage 相比，IndexedDB在這種情況下沒(méi)有任何區(qū)別。即使使用 IndexedDB，用戶(hù)仍然不會(huì)與他人分享所選頁(yè)面，也不會(huì)將其作為書(shū)簽供將來(lái)使用。它們都不適合這個(gè)用例。

Cookies

使用cookies是一種獨(dú)特的存儲(chǔ)方式，這是唯一的與服務(wù)器共享的存儲(chǔ)方式。Cookies作為每次請(qǐng)求的一部分被發(fā)送。它可以是當(dāng)用戶(hù)瀏覽我們的應(yīng)用程序中的頁(yè)面或當(dāng)用戶(hù)發(fā)送Ajax請(qǐng)求時(shí)。這樣我們就可以在客戶(hù)端和服務(wù)器之間建立一個(gè)共享狀態(tài)，也可以在不同子域的多個(gè)應(yīng)用程序之間共享狀態(tài)。本文中介紹的其他存儲(chǔ)選項(xiàng)無(wú)法實(shí)現(xiàn)。需要注意的是：每個(gè)請(qǐng)求都會(huì)發(fā)送 cookie，這意味著我們必須保持 cookie 較小，以保持適當(dāng)?shù)恼?qǐng)求大小。

Cookies的最常見(jiàn)用途是身份驗(yàn)證，這不在本文的討論范圍之內(nèi)。就像 localStorage 一樣，cookie只能存儲(chǔ)字符串。這些cookie被連接成一個(gè)以分號(hào)分隔的字符串，并在請(qǐng)求的cookie頭中發(fā)送。你可以為每個(gè)cookie設(shè)置很多屬性，比如過(guò)期、允許的域名、允許的頁(yè)面等等。

在例子中，我展示了如何通過(guò)客戶(hù)端來(lái)操作cookie，但也可以在你的服務(wù)器端應(yīng)用程序中改變它們。

<input type="checkbox" id="darkTheme" name="darkTheme" onclick='onChange(this);'> <label for="darkTheme">Dark theme</label>

function getCookie(cname) {   const name = cname + '=';   const decoded = decodeURIComponent(document.cookie);   const split = decoded.split(';');   const relevantCookie = split.find((cookie) => cookie.indexOf(`${cname}=`) === 0);   if (relevantCookie) {     return relevantCookie.split('=')[1];   }   return null; }  function toggle(on) {   if (on) {     document.documentElement.classList.add('dark');    } else {     document.documentElement.classList.remove('dark');       } }  function save(on) {   document.cookie = `dark_theme=${on.toString()}; max-age=31536000; SameSite=None; Secure`; }  function load() {   return getCookie('dark_theme') === 'true'; }  function onChange(checkbox) {   const value = checkbox.checked;   toggle(value);   save(value); }  const initialValue = load(); toggle(initialValue); document.querySelector('#darkTheme').checked = initialValue;

效果還是跟前面一樣

將用戶(hù)的喜好保存在cookie中，如果服務(wù)器能夠以某種方式利用它，就可以很好地滿足用戶(hù)的需求。例如，在主題用例中，服務(wù)器可以交付相關(guān)的CSS文件，并減少潛在的捆綁大小（在我們進(jìn)行服務(wù)器端渲染的情況下）。另一個(gè)用例可能是在沒(méi)有數(shù)據(jù)庫(kù)的情況下，在多個(gè)子域應(yīng)用之間共享這些偏好。

用JavaScript讀寫(xiě)cookie并不像您想象的那么簡(jiǎn)單。要保存新的cookie，您需要設(shè)置 document.cookie ——在上面的示例中查看 save 函數(shù)。我設(shè)置了 dark_theme cookie，并給它添加了一個(gè) max-age 屬性，以確保它在關(guān)閉標(biāo)簽時(shí)不會(huì)過(guò)期。另外，我添加 SameSite 和 Secure 屬性。這些都是必要的，因?yàn)镃odePen使用iframe來(lái)運(yùn)行這些例子，但在大多數(shù)情況下你并不需要它們。讀取一個(gè)cookie需要解析cookie字符串。

Cookie字符串如下所示：

key1=value1;key2=value2;key3=value3

因此，首先，我們必須用分號(hào)分隔字符串。現(xiàn)在，我們有一個(gè)形式為 key1=value1 的Cookie數(shù)組，所以我們需要在數(shù)組中找到正確的元素。最后，我們將等號(hào)分開(kāi)并獲得新數(shù)組中的最后一個(gè)元素。有點(diǎn)繁瑣，但一旦你實(shí)現(xiàn)了 getCookie 函數(shù)（或從我的例子中復(fù)制它：P），你就可以忘記它。

將應(yīng)用程序數(shù)據(jù)保存在cookie中可能是個(gè)壞主意！它將大大增加請(qǐng)求的大小，并降低應(yīng)用程序性能。此外，服務(wù)器無(wú)法從這些信息中獲益，因?yàn)樗菙?shù)據(jù)庫(kù)中已有信息的陳舊版本。如果你使用cookies，請(qǐng)確保它們很小。

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

URL storage

URL本身并不是存儲(chǔ)設(shè)備，但它是創(chuàng)建可共享狀態(tài)的好方法。實(shí)際上，這意味著將查詢(xún)參數(shù)添加到當(dāng)前URL中，這些參數(shù)可用于重新創(chuàng)建當(dāng)前狀態(tài)。最好的例子是搜索查詢(xún)和過(guò)濾器。如果我們?cè)贑SS-Tricks上搜索術(shù)語(yǔ)flexbox，則URL將更新為https://css-tricks.com/?s=fle…。看看我們使用URL后，分享搜索查詢(xún)有多簡(jiǎn)單？另一個(gè)好處是，你只需點(diǎn)擊刷新按鈕，就可以獲得更新的查詢(xún)結(jié)果，甚至可以將其收藏。

我們只能在URL中保存字符串，它的最大長(zhǎng)度是有限的，所以我們沒(méi)有那么多的空間。我們將不得不保持我們的狀態(tài)小，沒(méi)有人喜歡又長(zhǎng)又嚇人的網(wǎng)址。

同樣，CodePen使用iframe運(yùn)行示例，因此您看不到URL實(shí)際更改。不用擔(dān)心，因?yàn)樗械乃槠荚谀抢铮阅憧梢栽谌魏文阆胍牡胤绞褂盟?/p>

<input type="checkbox" id="darkTheme" name="darkTheme" onclick='onChange(this);'> <label for="darkTheme">Dark theme</label>

function toggle(on) {   if (on) {     document.documentElement.classList.add('dark');    } else {     document.documentElement.classList.remove('dark');       } }  function save(on) {   const params = new URLSearchParams(window.location.search);   params.set('dark_theme', on.toString());   history.pushState(null, null, `?${params.toString()}`); }  function load() {   const params = new URLSearchParams(window.location.search);   return params.get('dark_theme') === 'true'; }  function onChange(checkbox) {   const value = checkbox.checked;   toggle(value);   save(value); }  const initialValue = load(); toggle(initialValue); document.querySelector('#darkTheme').checked = initialValue;

效果還是一樣

我們可以通過(guò) window.location.search 訪問(wèn)查詢(xún)字符串，幸運(yùn)的是，可以使用 URLSearchParams 類(lèi)對(duì)其進(jìn)行解析，無(wú)需再應(yīng)用任何復(fù)雜的字符串解析。當(dāng)我們想讀取當(dāng)前值時(shí)，可以使用 get 函數(shù)，當(dāng)我們想寫(xiě)時(shí)，可以使用 set。僅設(shè)置值是不夠的，我們還需要更新URL。這可以使用 history.pushState 或 history.replaceState 來(lái)完成，取決于我們想要完成的行為。

我不建議將用戶(hù)的偏好保存在URL中，因?yàn)槲覀儽仨殞⑦@個(gè)狀態(tài)添加到用戶(hù)訪問(wèn)的每一個(gè)URL中，而且我們無(wú)法保證；例如，如果用戶(hù)點(diǎn)擊了谷歌搜索的鏈接。

就像Cookie一樣，由于空間太小，我們無(wú)法在URL中保存應(yīng)用程序數(shù)據(jù)。而且即使我們真的設(shè)法存儲(chǔ)它，網(wǎng)址也會(huì)很長(zhǎng)，而且不吸引人點(diǎn)擊。可能看起來(lái)像是釣魚(yú)攻擊的一種。

<p>Select page:</p> <p id="pages">   <button onclick="updatePage(0)">0</button>   <button onclick="updatePage(1)">1</button>   <button onclick="updatePage(3)">3</button>   <button onclick="updatePage(4)">4</button>   <button onclick="updatePage(5)">5</button> </p> <ul id="list"> </ul>

async function loadPokemons(page) {   const res = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=10&offset=${page * 10}`);   const data = await res.json();   return data.results; }  function appendPokemon(pokemon) {   const node = document.createElement('li');   const textnode = document.createTextNode(pokemon.name);   node.appendChild(textnode);   document.querySelector('#list').appendChild(node); }  function clearList() {   const list = document.querySelector('#list');   while (list.firstChild) {     list.removeChild(list.lastChild);   } }  function savePage(page) {   const params = new URLSearchParams(window.location.search);   params.set('page', page.toString());   history.pushState(null, null, `?${params.toString()}`); }  function loadPage() {   const params = new URLSearchParams(window.location.search);   if (params.has('page')) {     return parseInt(params.get('page'));   }   return 0; }  async function updatePage(page) {   clearList();   savePage(page);   const pokemons = await loadPokemons(page);   pokemons.forEach(appendPokemon); }  const page = loadPage(); updatePage(page);

效果

就像我們的分頁(yè)例子一樣，臨時(shí)應(yīng)用狀態(tài)是最適合URL查詢(xún)字符串的。同樣，你無(wú)法看到URL的變化，但每次點(diǎn)擊一個(gè)頁(yè)面時(shí)，URL都會(huì)以 ?page=x 查詢(xún)參數(shù)更新。當(dāng)網(wǎng)頁(yè)加載時(shí)，它會(huì)查找這個(gè)查詢(xún)參數(shù)，并相應(yīng)地獲取正確的頁(yè)面。現(xiàn)在，我們可以把這個(gè)網(wǎng)址分享給我們的朋友，讓他們可以享受我們最喜歡的神奇寶貝。

Cache API

Cache API是網(wǎng)絡(luò)級(jí)的存儲(chǔ)，它用于緩存網(wǎng)絡(luò)請(qǐng)求及其響應(yīng)。Cache API非常適合service worker，service worker可以攔截每一個(gè)網(wǎng)絡(luò)請(qǐng)求，使用 Cache API 它可以輕松地緩存這兩個(gè)請(qǐng)求。service worker也可以將現(xiàn)有的緩存項(xiàng)作為網(wǎng)絡(luò)響應(yīng)返回，而不是從服務(wù)器上獲取。這樣，您可以減少網(wǎng)絡(luò)負(fù)載時(shí)間，并使你的應(yīng)用程序即使處于脫機(jī)狀態(tài)也能正常工作。最初，它是為service worker創(chuàng)建的，但在現(xiàn)代瀏覽器中，Cache API也可以在窗口、iframe和worker上下文中使用。這是一個(gè)非常強(qiáng)大的API，可以極大地改善應(yīng)用的用戶(hù)體驗(yàn)。

就像IndexedDB一樣，Cache API的存儲(chǔ)不受限制，您可以存儲(chǔ)數(shù)百兆字節(jié)，如果需要甚至可以存儲(chǔ)更多。API是異步的，所以它不會(huì)阻塞你的主線程，而且它可以通過(guò)全局屬性 caches 來(lái)訪問(wèn)。

Browser extension

如果你建立一個(gè)瀏覽器擴(kuò)展，你有另一個(gè)選擇來(lái)存儲(chǔ)你的數(shù)據(jù)，我在進(jìn)行擴(kuò)展程序daily.dev時(shí)發(fā)現(xiàn)了它。如果你使用Mozilla的polyfill，它可以通過(guò) chrome.storage 或 browser.storage 獲得。確保在你的清單中申請(qǐng)一個(gè)存儲(chǔ)權(quán)限以獲得訪問(wèn)權(quán)。

有兩種類(lèi)型的存儲(chǔ)選項(xiàng)：local和sync。local存儲(chǔ)是不言而喻的，它的意思是不共享，保存在本地。sync存儲(chǔ)是作為谷歌賬戶(hù)的一部分同步的，你在任何地方用同一個(gè)賬戶(hù)安裝擴(kuò)展，這個(gè)存儲(chǔ)都會(huì)被同步。兩者都有相同的API，所以如果需要的話，來(lái)回切換超級(jí)容易。它是異步存儲(chǔ)，因此不會(huì)像 localStorage 這樣阻塞主線程。不幸的是，我不能為這個(gè)存儲(chǔ)選項(xiàng)創(chuàng)建一個(gè)演示，因?yàn)樗枰粋€(gè)瀏覽器擴(kuò)展，但它的使用非常簡(jiǎn)單，幾乎和 localStorage 一樣。有關(guān)確切實(shí)現(xiàn)的更多信息，請(qǐng)參閱Chrome文檔。

結(jié)束

瀏覽器有許多選項(xiàng)可用于存儲(chǔ)數(shù)據(jù)。根據(jù)Chrome團(tuán)隊(duì)的建議，我們的首選存儲(chǔ)應(yīng)該是IndexedDB，它是異步存儲(chǔ)，有足夠的空間來(lái)存儲(chǔ)我們想要的任何東西。不鼓勵(lì)使用 localStorage，但它比 IndexedDB 更易于使用。Cookies是與服務(wù)器共享客戶(hù)端狀態(tài)的一種好方法，但通常用于身份驗(yàn)證。

如果你想創(chuàng)建具有可共享狀態(tài)的頁(yè)面，如搜索頁(yè)面，請(qǐng)使用URL的查詢(xún)字符串來(lái)存儲(chǔ)這些信息。最后，如果你建立一個(gè)擴(kuò)展，一定要閱讀關(guān)于 chrome.storage。

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻！！