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

<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>

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

長(zhǎng)度函數(shù)檢索存儲(chǔ)區(qū)域中的值總數(shù)。 可以在車身標(biāo)簽的撞擊事件中調(diào)用上述功能，如下 可以使用clear（）函數(shù)或removeItem（“鍵”）來(lái)清除本地存儲(chǔ)區(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>

存儲(chǔ)事件

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

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

事件對(duì)象具有以下屬性

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

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

結(jié)論

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

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

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

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

HTML5 Web Storage的存儲(chǔ)限制是什么？

>

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

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

>

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

>您可以通過(guò)在JavaScript代碼中使用簡(jiǎn)單的“ if”條件來(lái)檢查瀏覽器是否支持HTML5 Web存儲(chǔ)。 if（typeof（storage）！==“ undefined”）{// for localstorage/sessionstorage的代碼。 } else {//對(duì)不起！沒(méi)有Web存儲(chǔ)支持..}

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

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

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

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

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

>

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

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