HTML5網絡存儲-js教程-PHP中文網

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

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

登入後複製

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

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

登入後複製

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

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

登入後複製

存儲事件

當我們從Web存儲中設置或刪除數據時，將在窗口對像上觸發存儲事件。我們可以將偵聽器添加到事件中，並在需要時處理存儲更改。

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

登入後複製

事件對象具有以下屬性

鍵 - 已更改的屬性
> newValue - 新設置的值
OldValue - 以前存儲的值
URL - 事件起源
storagearea - localstorage或sessionstorage對象

請記住，事件僅在其他窗口上發射（不在事件觸發的窗口上），如果數據沒有更改，則該事件不會被觸發。相同的API方法也適用於會話存儲，但該方法應在SessionStorage對像上執行。

結論

因此，現在您可以開始使用Web Storage存儲用戶首選項，用戶信息，會話信息等。您還可以嘗試創建可以完全離線使用的應用程序，並且在離線過程中存儲的數據可以作為批處理更新發送回服務器當用戶再次在線時。

經常詢問有關HTML5 Web Storage的問題（常見問題解答）

在HTML5 Web Storage中的SessionStorage和LocalStorage之間有什麼區別？它們之間的主要區別在於他們的壽命和範圍。 SessionStorage設計為在單個瀏覽器會話期間的臨時存儲。會話結束後，即用戶關閉瀏覽器選項卡或窗口後，它就會清除。另一方面，即使瀏覽器關閉並重新打開，LocalStorage仍然存在。它沒有到期時間，並且保留在用戶或Web應用程序手動清除之前。網絡存儲很簡單。您可以使用setItem（）方法來存儲數據，getItem（）方法來檢索數據，以及removeItem（）方法刪除數據。例如，要將數據項存儲在LocalStorage中，您可以使用localstorage.setitem（“鍵”，“值”）。要檢索這些數據，請使用localstorage.getItem（'key'）。要刪除數據，請使用localStorage.removeItem（'key'）。

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

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

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

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

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

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