HTML5本地存儲重新審視

鑰匙要點

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

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

可用的磁盤空間

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

移動瀏覽器：

瀏覽器 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 >本機緩存vs本地存儲

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

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

作為一個很好的做法，您應該嘗試執行盡可能少的讀取。另外，由於我們正在處理同步API，因此您應該嘗試僅在窗口啟動窗口後才從本地存儲中讀取數據，以避免阻止UI線程。

事物已經改變

>但是情況越來越好。 Mobify的Peter McLachlan發表的一篇文章解釋說，本地存儲的速度比移動設備上的本機緩存快5倍。

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

誰在使用本地存儲？

>

>最近有一些網站使用本地存儲來緩存資產，例如使用本地存儲進行關鍵路徑CSS的監護人。您可以在2014年速度會議上查看此演示文稿，以了解他們如何做到這一點。

>最近也開始在本地存儲中加入Web字體。在本文有關最近在其網站上實施的一些績效改進的文章中，他們報告了推遲的網絡字體並將其緩存在當地存儲中，這導致了最有效的改進。

>

私有瀏覽的註釋

如Caniuse.com在“標籤已知問題”上報導的，在以私有或隱身模式運行時，Safari，ios Safari和Android瀏覽器不支持在本地存儲中設置項目。

>

>其他瀏覽器（例如Chrome和Firefox）允許您在私有模式下將數據存儲在本地存儲中，但是當您退出專用模式時，將清除數據。這是由於隱私問題造成的，因為在私有模式下，有人可能會使用持久數據來了解用戶的操作。

如果預計將在隨後的訪問中出現在上一個會話下的值下，則此問題可能會破壞您的應用程序的行為。因此，為了安全地使用本地存儲，這不僅是測試支持的好習慣，而且是測試獲取和設置項目的能力。

>

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

>

結論

也許是時候開始重新審視本地存儲及其潛在用途了，尤其是在可以使用它來避免延遲瓶頸的移動設備上。我們可以開始考慮緩存我們的資產的新方法，然後立即將其提供給我們的用戶。我們已經看到已經以非常規的方式成功實現了本地存儲使用。

經常詢問有關HTML5本地存儲的問題（常見問題解答）

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

>您可以通過在JavaScript中使用“ IN”運算符來檢查瀏覽器是否支持HTML5本地存儲。這是一個簡單的代碼段，檢查本地存儲支持：

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

}

>如何從HTML5本地存儲中清除數據？

>您可以使用clear（）方法從HTML5本地存儲中清除數據。此方法從當前域的本地存儲中刪除了所有鍵值對。這是一個簡單的代碼片段：

localstorage.clear（）;

>我可以存儲對像或數組中的html5 local Storage中嗎？

是的，您可以將對像或數組存儲在HTML5本地存儲。但是，本地存儲僅支持字符串鍵值對。因此，您需要在存儲之前使用json.stringify（）將對像或數組轉換為字符串，然後在檢索時使用json.parse（）將其轉換回對像或數組。本地存儲和會話存儲之間的區別？

>本地存儲和會話存儲之間的主要區別在於其壽命和範圍。即使關閉瀏覽器並重新打開瀏覽器，本地存儲中的數據仍然存在，而頁面會話結束時會話存儲中的數據將被清除，即當關閉瀏覽器時。 >我如何迭代本地中的所有值存儲？

您可以使用簡單的循環與localstorage.key（）方法和localStorage.getItem（）結合使用for Loop（）迭代本地存儲中的所有值方法。

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

不，不，在子域之間無法共享本地存儲。每個子域都有其自己的獨立本地存儲。

可以在不同的瀏覽器之間傳輸本地存儲數據嗎？

不，不能在不同的瀏覽器之間傳輸本地存儲數據。每個瀏覽器都有其自己的獨立本地存儲。

>

>如何處理本地存儲配額超過錯誤？

當超​​過本地存儲配額時，拋出了quota_exceeded_err異常。您可以通過將其捕獲在試用塊中並採取適當的措施來處理此異常，例如清除某些空間或通知用戶。

>

以上是HTML5本地存儲重新審視的詳細內容。更多資訊請關注PHP中文網其他相關文章！