HTML5本地存儲的方法

今天小編給大家分享一下HTML5本地存儲的方法的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

HTML5 LocalStorage本地存儲

說到本地存儲，這玩意真是歷盡千辛萬苦才走到HTML5這一步.

最初的Cookies自然是大家都知道，問題主要就是太小，大概也就4KB的樣子，而且IE6只支持每個域名20個cookies ，太少了。優(yōu)勢就是大家都支持，而且支持得還蠻好。很早以前那些替換cookies的用戶也都慢慢的不存在了，就好像以前替換javascript的用戶不存在了一樣。

userData是IE的東西，垃圾?，F(xiàn)在用的最多的是Flash吧，空間是Cookie的25倍，基本夠用。再之后Google推出了Gears ，雖然沒有限制，但不爽的地方就是要裝額外的插件（沒具體研究過）。到了HTML5把這些都統(tǒng)一了，官方建議是每個網(wǎng)站5MB ，非常大了，就存些字符串，足夠了。比較奇怪異的是居然所有支持的瀏覽器目前都采用的5MB ，，盡管有一些瀏覽器可以讓用戶設(shè)置，但對于網(wǎng)頁制作者來說，目前的規(guī)模就5MB來考慮是比較妥當(dāng)?shù)摹?/p>

IE在8.0的時候就支持了，非常出人意料。不過需要注意的是，IE ，F(xiàn)irefox測試的時候需要把文件上傳到服務(wù)器上（或者localhost ），直接點開本地的HTML文件，是不行的。

首先自然是檢測瀏覽器是否支持本地存儲。在HTML5中，本地存儲是一個窗口的屬性，包括localStorage和sessionStorage ，從名字應(yīng)該可以很容易的辨認(rèn)識別的區(qū)別，前者是一直存在本地的，只是伴隨著session ，窗口一旦關(guān)閉就沒了。多個適當(dāng)?shù)耐耆嗤?，這里以localStorage為例。

if（window.localStorage）{

 alert（'此瀏覽器支持localStorage'）;

} else {

 alert（'此瀏覽器不支持localStorage'）;

}

存儲數(shù)據(jù)的方法就是直接給window.localStorage添加一個屬性，例如：window.localStorage.a 或者 window.localStorage [“ a”] 。它的讀取，寫入，刪除操作方法很簡單，以鍵值對的方式存在的，如下：

localStorage.a = 3; //設(shè)置a為“ 3”

localStorage [“ a”] =“ sfsf”; //設(shè)置a為“ sfsf” ，覆蓋上面的值

localStorage.setItem（“ b”，“ isaac”） ; //設(shè)置b為“ isaac”

var a1 = localStorage [“ a”]; //獲取a的值

var a2 = localStorage.a; //獲取a的值

var b = localStorage.getItem（“ b”）; //獲取b的值

localStorage.removeItem（“ c”）; //清除c的值

這里最推薦使用的自然是getItem（）和setItem（），清除鍵值對使用removeItem（）。如果希望一次性清除所有的鍵值對，可以使用clear（）。另外，HTML5還提供了一個鍵（ ）方法，可以在不知道有一些鍵值的時候使用，如下：

var storage = window.localStorage;

函數(shù)showStorage（）{

 for（var i = 0; i  // key（i）獲得相應(yīng)的鍵，再用getItem（）方法獲得對應(yīng)的值

  document.write（storage.key（i）+“：” + storage.getItem（storage.key（i））+“

” ）;

 }

}

寫一個最簡單的，利用本地存儲的計數(shù)器：

var storage = window.localStorage;

如果（！storage.getItem（“ pageLoadCount”））storage.setItem（“ pageLoadCount”，0）;

storage.pageLoadCount = parseInt（storage.getItem（“ pageLoadCount”））+ 1; //必須格式轉(zhuǎn)換

document.getElementByIdx_x（“ count”）。innerHTML = storage.pageLoadCount;

showStorage（）;

不斷刷新能夠看到數(shù)字在一點點增長

需要注意的是，HTML5本地存儲只能存儲二進(jìn)制，任何格式存儲的時候都會被自動轉(zhuǎn)為串行，所以讀取的時候，需要自己進(jìn)行類型的轉(zhuǎn)換。這也就是上一段代碼中parseInt必須要使用的原因。

另外，在iPhone / iPad的上有時設(shè)置setItem（）時會出現(xiàn)詭異的QUOTA_EXCEEDED_ERR錯誤，這時一般在setItem之前，先的removeItem（）就確定了。

HTML5的本地存儲，還提供了一個存儲事件，可以對鍵值對的改變進(jìn)行監(jiān)聽，使用方法如下：

if（window.addEventListener）{

 window.addEventListener（“ storage”，handle_storage，false）;

}其他if（window.attachEvent）{

 window.attachEvent（“ onstorage”，handle_storage）;

}

函數(shù)handle_storage（e）{

 if（！e）{e = window.event;}

 // showStorage（）;

}

對于事件變量e ，是一個StorageEvent對象，提供了一些實用的屬性，可以很好的觀察鍵值對的變化，如下表：

 財產(chǎn)

 類型

 描述

 鑰匙

 細(xì)繩

 添加，刪除或修改的命名密鑰

 舊值

 任何

 先前的值（現(xiàn)已覆蓋）；如果添加了新項目，則為null

 newValue

 任何

 新值；如果添加了項目，則為null

 網(wǎng)址/ uri

 細(xì)繩

 調(diào)用觸發(fā)此更改的方法的頁面

這里添加兩個鍵值對a和b ，并增加一個按鈕。給a設(shè)置固定的值，當(dāng)點擊按鈕時，修改b的值：

您已經(jīng)瀏覽過此頁面 0次。

測試發(fā)現(xiàn)，目前瀏覽器對這個支持不太好，僅iPad和Firefox支持，而且Firefox支持得亂糟糟，e對象根本沒有那些屬性。iPad支持非常好，用的是e.uri （不是e.url ），臺式機上的Safari不行，詭異。

目前瀏覽器都具備很好的開發(fā)者調(diào)試功能，下面分別是Chrome和Firefox的調(diào)試工具查看LocalStorage ：

另外，目前的JavaScript使用非常多的json格式，如果希望存儲在本地，可以直接調(diào)用JSON.stringify（）將其轉(zhuǎn)為編碼。讀取出來后調(diào)用JSON.parse（）將字符串轉(zhuǎn)為json格式，如下所示：

var details = {作者：“ isaac”，“描述”：“ fresheggs”，“評分”：100};

storage.setItem（“ details”，JSON.stringify（details））;

details = JSON.parse（storage.getItem（“ details”））;

JSON對象在支持localStorage的瀏覽器上基本都支持，需要注意的是IE8 ，它支持JSON ，但如果添加了如下的兼容模式代碼，切到IE7模式就不行了（此時依然支持localStorage ，雖然顯示窗口.localStorage是[object] ，而不是之前的[object Storage] ，但測試發(fā)現(xiàn)getItem（），setItem（）等均能使用）。

以上就是“HTML5本地存儲的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。