if（Modernizr.localstorage）{ //使用localstorage對象存儲數(shù)據(jù) } else { > alert（'無法存儲用戶首選項，因為您的瀏覽器不支持本地存儲”）； } setItem（“鍵”，值'）使我們能夠?qū)?shù)據(jù)寫入本地存儲。 如果存儲限制超過5MB，則META_EXCEEDED_ERR異常將拋出。因此，在保存數(shù)據(jù)時，將嘗試/捕獲塊添加到存儲代碼總是最好的。

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

我們可以通過使用瀏覽器隨附的開發(fā)人員工具來檢查數(shù)據(jù)是否存儲在本地存儲中。例如，在Chrome中，右鍵單擊瀏覽器，然后選擇“檢查元素”。選擇資源選項卡，然后單擊本地存儲項目。我們可以看到用戶選擇的數(shù)據(jù)以鍵/值對的形式存儲。 可以使用用戶設(shè)置的背景和字體大小值重新加載網(wǎng)頁。 GetItem（“鍵”）有助于檢索數(shù)據(jù)庫中存儲的數(shù)據(jù)。

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

長度函數(shù)檢索存儲區(qū)域中的值總數(shù)。 可以在車身標(biāo)簽的撞擊事件中調(diào)用上述功能，如下 可以使用clear（）函數(shù)或removeItem（“鍵”）來清除本地存儲區(qū)域 功能。在我們的示例中，下面的函數(shù)在“清除”按鈕的單擊事件上調(diào)用。

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

存儲事件

當(dāng)我們從Web存儲中設(shè)置或刪除數(shù)據(jù)時，將在窗口對象上觸發(fā)存儲事件。我們可以將偵聽器添加到事件中，并在需要時處理存儲更改。

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

事件對象具有以下屬性

• 鍵 - 已更改的屬性
>
• > newValue - 新設(shè)置的值
• OldValue - 以前存儲的值
>
• URL - 事件起源
的完整URL路徑
• storagearea - localstorage或sessionstorage對象

請記住，事件僅在其他窗口上發(fā)射（不在事件觸發(fā)的窗口上），如果數(shù)據(jù)沒有更改，則該事件不會被觸發(fā)。 相同的API方法也適用于會話存儲，但該方法應(yīng)在SessionStorage對象上執(zhí)行。

結(jié)論

因此，現(xiàn)在您可以開始使用Web Storage存儲用戶首選項，用戶信息，會話信息等。您還可以嘗試創(chuàng)建可以完全離線使用的應(yīng)用程序，并且在離線過程中存儲的數(shù)據(jù)可以作為批處理更新發(fā)送回服務(wù)器當(dāng)用戶再次在線時。

經(jīng)常詢問有關(guān)HTML5 Web Storage的問題（常見問題解答）

在HTML5 Web Storage中的SessionStorage和LocalStorage之間有什么區(qū)別？它們之間的主要區(qū)別在于他們的壽命和范圍。 SessionStorage設(shè)計為在單個瀏覽器會話期間的臨時存儲。會話結(jié)束后，即用戶關(guān)閉瀏覽器選項卡或窗口后，它就會清除。另一方面，即使瀏覽器關(guān)閉并重新打開，LocalStorage仍然存在。它沒有到期時間，并且保留在用戶或Web應(yīng)用程序手動清除之前。網(wǎng)絡(luò)存儲很簡單。您可以使用setItem（）方法來存儲數(shù)據(jù)，getItem（）方法來檢索數(shù)據(jù)，以及removeItem（）方法刪除數(shù)據(jù)。例如，要將數(shù)據(jù)項存儲在LocalStorage中，您可以使用localstorage.setitem（“鍵”，“值”）。要檢索這些數(shù)據(jù)，請使用localstorage.getItem（'key'）。要刪除數(shù)據(jù)，請使用localStorage.removeItem（'key'）。

html5 Web Storage在一定程度上是安全的。它不允許存儲敏感的用戶信息，例如密碼或信用卡號。但是，它容易受到跨站點腳本（XSS）攻擊的影響。因此，建議不要存儲敏感信息，并在存儲數(shù)據(jù)之前始終驗證和消毒。

HTML5 Web Storage的存儲限制是什么？

>

> HTML5 Web Storage的存儲限制變化在不同的瀏覽器之間。但是，大多數(shù)現(xiàn)代瀏覽器為LocalStorage提供約5MB的存儲空間。 SessionStorage還提供了相同數(shù)量的存儲空間，但重要的是要記住，此存儲是暫時的。

>我可以在所有瀏覽器上使用HTML5 Web Storage嗎？

>

>如何檢查瀏覽器是否支持HTML5 Web Storage？

>您可以通過在JavaScript代碼中使用簡單的“ if”條件來檢查瀏覽器是否支持HTML5 Web存儲。 if（typeof（storage）！==“ undefined”）{// for localstorage/sessionstorage的代碼。 } else {//對不起！沒有Web存儲支持..}

>我可以在HTML5 Web Storage中存儲對象或數(shù)組嗎？但是，由于Web存儲僅支持字符串值，因此您需要在存儲它們之前使用JSON.STRINGIFY（）將對象或數(shù)組轉(zhuǎn)換為字符串。要檢索它們，您可以使用JSON.PARSE（）。

>如何將它們轉(zhuǎn)換為對象或數(shù)組，我如何清除HTML5 Web Storage中的所有數(shù)據(jù)？

>您可以清除HTML5中的所有數(shù)據(jù)使用clear（）方法的Web存儲。例如，要清除LocalStorage中的所有數(shù)據(jù)，您可以使用localstorage.clear（）。

>我可以將HTML5 Web Storage用于離線應(yīng)用程序嗎？

是的，可以使用HTML5 Web Storage用于離線申請。它允許您將數(shù)據(jù)存儲在用戶的瀏覽器上，即使用戶離線也可以訪問和使用。

>

> HTML5 Web Storage的替代方案是什么？到HTML5 Web存儲，包括Cookie，IndexedDB和Web SQL。但是，這些中的每一個都有其自身的優(yōu)勢和缺點，選擇取決于您的Web應(yīng)用程序的特定要求。

以上是HTML5網(wǎng)絡(luò)存儲的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！