鑰匙要點(diǎn)

Web Storage API的一部分
• HTML5本地存儲(chǔ)允許在瀏覽器中存儲(chǔ)數(shù)據(jù)存儲(chǔ)，其容量為2MB至10MB，具體取決於瀏覽器，協(xié)議，端口和頂級(jí)域。與cookie不同，此數(shù)據(jù)未發(fā)送回服務(wù)器，並在會(huì)話和設(shè)備之間持續(xù)持續(xù)。
>
• >由於本地存儲(chǔ)的同步性可能會(huì)受到性能，但它的速度可能比移動(dòng)設(shè)備上的本機(jī)緩存更快。為了優(yōu)化性能，建議限制讀取，僅在窗口之後訪問(wèn)本地存儲(chǔ)。
>並非所有瀏覽器都支持在私人或隱身模式下本地存儲(chǔ)中設(shè)置項(xiàng)目，在某些情況下，退出後，以私有模式存儲(chǔ)的數(shù)據(jù)被清除。為了確保安全使用本地存儲(chǔ)，建議不僅要測(cè)試支持，還建議獲得和設(shè)置物品的能力。 >

>本地存儲(chǔ)是HTML5 Web Storage API的一部分，它允許您將數(shù)據(jù)存儲(chǔ)在瀏覽器中。與cookie不同，使用本地存儲(chǔ)存儲(chǔ)的數(shù)據(jù)不會(huì)發(fā)送回服務(wù)器。所有數(shù)據(jù)都停留在客戶端上，您當(dāng)前可以存儲(chǔ)從2MB到10MB。此限制與使用的特定瀏覽器，協(xié)議（HTTP或HTTPS），端口和最高級(jí)別域相關(guān)。 > 在本文中，我們將討論如何使用此API來(lái)提高網(wǎng)站的性能。我會(huì)假設(shè)您知道什麼是本地存儲(chǔ)和暴露的方法，但是如果您需要復(fù)習(xí)，我建議您閱讀Colin Ihrig的Web Storage API概述。

可用的磁盤空間

>在開(kāi)始討論本地存儲(chǔ)之前，我想概述大型移動(dòng)設(shè)備和桌面瀏覽器中可用的磁盤空間。以下表是基於文章“在移動(dòng)瀏覽器上使用配額”。

移動(dòng)瀏覽器：

瀏覽器 chrome android瀏覽器 firefox > ios Safari 版本 40 4.3 34 6-8 可用空間 10MB 2MB 10MB 5MB 桌面瀏覽器：

瀏覽器 chrome > Opera firefox > Safari > Internet Explorer 版本 40 27 34 6-8 9-11 可用空間 10MB 10MB 10MB 5MB 10MB >本機(jī)緩存vs本地存儲(chǔ)

使用本地存儲(chǔ)時(shí)，您的數(shù)據(jù)將留在客戶端上，並在會(huì)話和設(shè)備重新啟動(dòng)之間持續(xù)存在。正如我在簡(jiǎn)介中提到的那樣，本地存儲(chǔ)API的限制與特定瀏覽器（如上一個(gè)表中所示），協(xié)議，端口和最高級(jí)別域相關(guān)。相比之下，瀏覽器本機(jī)緩存上可用的空間在網(wǎng)站上共享，並且在移動(dòng)設(shè)備上較小。它經(jīng)常被沖洗，有時(shí)甚至在同一訪問(wèn)中。移動(dòng)設(shè)備還有一個(gè)其他問(wèn)題：它們不如桌面設(shè)備強(qiáng)大，因此必須實(shí)現(xiàn)良好的性能。

>關(guān)於本地存儲(chǔ)性能的討論很多。例如，以前與莫齊拉（Mozilla）一起寫的克里斯蒂安·海爾曼（Christian Heilmann）寫道：“沒(méi)有簡(jiǎn)單的解決方案用於本地存儲(chǔ)”。如果不仔細(xì)使用，本地存儲(chǔ)可能會(huì)受到性能的打擊。您需要考慮的第一件事是它是同步API，因此它阻止了主UI線程。本地存儲(chǔ)寫入並讀取來(lái)自硬盤驅(qū)動(dòng)器的數(shù)據(jù)，這比從內(nèi)存中閱讀要貴得多。為了使您訪問(wèn)數(shù)據(jù)，本地存儲(chǔ)需要從磁盤中讀取數(shù)據(jù)，這就是性能命中的地方。這種性能命中並不是少量數(shù)據(jù)的主要問(wèn)題，但是使用完整的存儲(chǔ)限制可以很明顯。

作為一個(gè)很好的做法，您應(yīng)該嘗試執(zhí)行盡可能少的讀取。另外，由於我們正在處理同步API，因此您應(yīng)該嘗試僅在窗口啟動(dòng)窗口後才從本地存儲(chǔ)中讀取數(shù)據(jù)，以避免阻止UI線程。

事物已經(jīng)改變

>但是情況越來(lái)越好。 Mobify的Peter McLachlan發(fā)表的一篇文章解釋說(shuō)，本地存儲(chǔ)的速度比移動(dòng)設(shè)備上的本機(jī)緩存快5倍。

在同一篇文章的附錄中，您可以看到移動(dòng)瀏覽器上本地存儲(chǔ)的性能的演變以及它的改進(jìn)程度。您還可以看到本地存儲(chǔ)始終比本機(jī)緩存更快。

誰(shuí)在使用本地存儲(chǔ)？

>

>最近有一些網(wǎng)站使用本地存儲(chǔ)來(lái)緩存資產(chǎn)，例如使用本地存儲(chǔ)進(jìn)行關(guān)鍵路徑CSS的監(jiān)護(hù)人。您可以在2014年速度會(huì)議上查看此演示文稿，以了解他們?nèi)绾巫龅竭@一點(diǎn)。

>最近也開(kāi)始在本地存儲(chǔ)中加入Web字體。在本文有關(guān)最近在其網(wǎng)站上實(shí)施的一些績(jī)效改進(jìn)的文章中，他們報(bào)告了推遲的網(wǎng)絡(luò)字體並將其緩存在當(dāng)?shù)卮鎯?chǔ)中，這導(dǎo)致了最有效的改進(jìn)。

>

私有瀏覽的註釋

如Caniuse.com在“標(biāo)籤已知問(wèn)題”上報(bào)導(dǎo)的，在以私有或隱身模式運(yùn)行時(shí)，Safari，ios Safari和Android瀏覽器不支持在本地存儲(chǔ)中設(shè)置項(xiàng)目。

>

>其他瀏覽器（例如Chrome和Firefox）允許您在私有模式下將數(shù)據(jù)存儲(chǔ)在本地存儲(chǔ)中，但是當(dāng)您退出專用模式時(shí)，將清除數(shù)據(jù)。這是由於隱私問(wèn)題造成的，因?yàn)樵谒接心Ｊ较拢腥丝赡軙?huì)使用持久數(shù)據(jù)來(lái)了解用戶的操作。

如果預(yù)計(jì)將在隨後的訪問(wèn)中出現(xiàn)在上一個(gè)會(huì)話下的值下，則此問(wèn)題可能會(huì)破壞您的應(yīng)用程序的行為。因此，為了安全地使用本地存儲(chǔ)，這不僅是測(cè)試支持的好習(xí)慣，而且是測(cè)試獲取和設(shè)置項(xiàng)目的能力。

>

>有關(guān)在私有模式下的本地存儲(chǔ)行為以及如何在不同瀏覽器中查看本地存儲(chǔ)內(nèi)容的更多信息，您可以使用“在測(cè)試時(shí)不要忘記檢查私人瀏覽模式”作為參考。

>

結(jié)論

也許是時(shí)候開(kāi)始重新審視本地存儲(chǔ)及其潛在用途了，尤其是在可以使用它來(lái)避免延遲瓶頸的移動(dòng)設(shè)備上。我們可以開(kāi)始考慮緩存我們的資產(chǎn)的新方法，然後立即將其提供給我們的用戶。我們已經(jīng)看到已經(jīng)以非常規(guī)的方式成功實(shí)現(xiàn)了本地存儲(chǔ)使用。

經(jīng)常詢問(wèn)有關(guān)HTML5本地存儲(chǔ)的問(wèn)題（常見(jiàn)問(wèn)題解答）

> HTML5本地存儲(chǔ)的最大存儲(chǔ)限制是多少？但是，大多數(shù)現(xiàn)代瀏覽器每個(gè)域提供約5MB的存儲(chǔ)空間。這明顯大於cookie提供的4KB（約4096個(gè)字節(jié)）。重要的是要注意，此存儲(chǔ)是每個(gè)域，而不是每個(gè)本地存儲(chǔ)對(duì)象。 >如何檢查瀏覽器是否支持HTML5本地存儲(chǔ)？

>您可以通過(guò)在JavaScript中使用“ IN”運(yùn)算符來(lái)檢查瀏覽器是否支持HTML5本地存儲(chǔ)。這是一個(gè)簡(jiǎn)單的代碼段，檢查本地存儲(chǔ)支持：

if（window && window中的'localStorage'&& window ['localStorage']！== null）{ //支持本地存儲(chǔ)
> } else {
//不支持本地存儲(chǔ)
}

}

>如何從HTML5本地存儲(chǔ)中清除數(shù)據(jù)？

>您可以使用clear（）方法從HTML5本地存儲(chǔ)中清除數(shù)據(jù)。此方法從當(dāng)前域的本地存儲(chǔ)中刪除了所有鍵值對(duì)。這是一個(gè)簡(jiǎn)單的代碼片段：

localstorage.clear（）;

>我可以存儲(chǔ)對(duì)像或數(shù)組中的html5 local Storage中嗎？

是的，您可以將對(duì)像或數(shù)組存儲(chǔ)在HTML5本地存儲(chǔ)。但是，本地存儲(chǔ)僅支持字符串鍵值對(duì)。因此，您需要在存儲(chǔ)之前使用json.stringify（）將對(duì)像或數(shù)組轉(zhuǎn)換為字符串，然後在檢索時(shí)使用json.parse（）將其轉(zhuǎn)換回對(duì)像或數(shù)組。本地存儲(chǔ)和會(huì)話存儲(chǔ)之間的區(qū)別？

>本地存儲(chǔ)和會(huì)話存儲(chǔ)之間的主要區(qū)別在於其壽命和範(fàn)圍。即使關(guān)閉瀏覽器並重新打開(kāi)瀏覽器，本地存儲(chǔ)中的數(shù)據(jù)仍然存在，而頁(yè)面會(huì)話結(jié)束時(shí)會(huì)話存儲(chǔ)中的數(shù)據(jù)將被清除，即當(dāng)關(guān)閉瀏覽器時(shí)。 >我如何迭代本地中的所有值存儲(chǔ)？

您可以使用簡(jiǎn)單的循環(huán)與localstorage.key（）方法和localStorage.getItem（）結(jié)合使用for Loop（）迭代本地存儲(chǔ)中的所有值方法。

>可以在子域之間共享本地存儲(chǔ)嗎？

不，不，在子域之間無(wú)法共享本地存儲(chǔ)。每個(gè)子域都有其自己的獨(dú)立本地存儲(chǔ)。

可以在不同的瀏覽器之間傳輸本地存儲(chǔ)數(shù)據(jù)嗎？

不，不能在不同的瀏覽器之間傳輸本地存儲(chǔ)數(shù)據(jù)。每個(gè)瀏覽器都有其自己的獨(dú)立本地存儲(chǔ)。

>

>如何處理本地存儲(chǔ)配額超過(guò)錯(cuò)誤？

當(dāng)超??過(guò)本地存儲(chǔ)配額時(shí)，拋出了quota_exceeded_err異常。您可以通過(guò)將其捕獲在試用塊中並採(cǎi)取適當(dāng)?shù)拇胧﹣?lái)處理此異常，例如清除某些空間或通知用戶。

>

以上是HTML5本地存儲(chǔ)重新審視的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！