對(duì)HTML5中LocalStorage的一些使用建議

上個(gè)月末的w3ctech上，有同行提到了LocalStorage這個(gè)話題，我覺得在HTML5的眾多新特性中，LocalStorage算是比較實(shí)際同時(shí)瀏覽器也比較好實(shí)現(xiàn)的特性。

創(chuàng)新互聯(lián)業(yè)務(wù)包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、電子商務(wù)型網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)(多語言)、商城網(wǎng)站定制開發(fā)、按需求定制制作、全網(wǎng)營(yíng)銷推廣等。效率優(yōu)先，品質(zhì)保證，用心服務(wù)是我們的核心價(jià)值觀，我們將繼續(xù)以良好的信譽(yù)為基礎(chǔ)，秉承穩(wěn)固與發(fā)展、求實(shí)與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)！

LocalStorage的規(guī)范描述在這里：http://dev.w3.org/html5/webstorage/

首先一個(gè)細(xì)節(jié)，LocalStorage只能存儲(chǔ)鍵值對(duì)(key-value pair)形式的數(shù)據(jù)，并且key和value都只能存儲(chǔ)為字符串類型。之所以這樣說，因?yàn)镴S是動(dòng)態(tài)語言，我們可以在setItem時(shí)傳入int型數(shù)據(jù)(比如localStorage.setItem("a", 1))，但是它會(huì)轉(zhuǎn)換成字符串之后再進(jìn)行存儲(chǔ)和準(zhǔn)備隨時(shí)調(diào)用，當(dāng)我們用getItem訪問"a"時(shí)(localStorage.getItem("a"))，得到的是字符串"1"而非數(shù)字1。

第二，雖然localStorage[key] = value的寫法主流的瀏覽器都是支持的，但標(biāo)準(zhǔn)里并沒有明確的要求，所以不推薦這樣書寫代碼。而且很顯而易見的問題是：對(duì)length、setItem、getItem、clear這樣的key進(jìn)行讀寫是會(huì)產(chǎn)生問題的。假如我們執(zhí)行：

localStorage.setItem = null;

localStoarge.removeItem = null;

localStorage.clear = null;

那么整個(gè)LocalStorage的接口完備性將會(huì)遭到破壞。

當(dāng)然，對(duì)JS比較熟悉的童鞋可以思考一個(gè)附加的變態(tài)問題，執(zhí)行了上述代碼之后，localStorage還有沒有辦法恢復(fù)正常呢？

第三，如果我們不想存儲(chǔ)字符串，而是類型更豐富結(jié)構(gòu)更復(fù)雜的數(shù)據(jù)，我們推薦大家和JSON的相關(guān)函數(shù)JSON.parse/JSON.stringify配合使用。這樣我們可以方便復(fù)雜數(shù)據(jù)結(jié)構(gòu)和字符串之間的轉(zhuǎn)換，獲取數(shù)據(jù)的時(shí)候使用JSON.parse(localStorage.getItem("a"))，寫入數(shù)據(jù)的時(shí)候使用localStorage.setItem("a", JSON.stringify(obj))。

第四，LocalStorage跟cookies一樣是按照域名為單位進(jìn)行獨(dú)立存儲(chǔ)的，且是有容量上限的(一般為5MB)，當(dāng)我們調(diào)用setItem時(shí)如果超過容量上限，會(huì)觸發(fā)QuotaExceededError異常。我的經(jīng)驗(yàn)是，如果你是存文本的，一般碰不到這根線，可以無視；如果用DataURI方式存二進(jìn)制文件，就需要特別注意了，視頻的話，基本沒有5MB以下的，所以不會(huì)考慮LocalStorage的，也不用特別注意；但如果是圖片，很容易幾百K的圖片多存幾張就夠5MB了，所以有必要提個(gè)醒。當(dāng)然有些瀏覽器也會(huì)通過提醒用戶確認(rèn)來允許網(wǎng)站使用更多的容量，那個(gè)是另一說了。

上述四個(gè)建議是我個(gè)人使用LocalStorage最常碰到的狀況，這里分享給大家。

最后在附送一個(gè)“高階”技巧：window.onstorage事件。其實(shí)這也不算多高級(jí)，只是用的地方比較少罷了。假如我們同時(shí)打開了同域下的多個(gè)頁面，這時(shí)我在一個(gè)頁面里操作localStorage.setItem、localStorage.removeItem或localStorage.clear，其它同域的頁面就會(huì)觸發(fā)這個(gè)事件。事件附帶的參數(shù)是這樣的：

window.onstorage = function (event) {

    var key = event.key // 被修改的鍵名

    var oldValue = event.oldValue // 舊的值

    var newValue = event.newValue // 新的值

    var url = event.url // 觸發(fā)改變的網(wǎng)頁的url

    var storage = event.storageArea // 當(dāng)前l(fā)ocalStorage的引用(當(dāng)sessionStorage改變時(shí)，這里就是當(dāng)前sessionStorage的引用，好吧扯遠(yuǎn)了，看不懂可以先無視)

}

這個(gè)特性可以幫助我們?cè)诙鄠€(gè)頁面間實(shí)現(xiàn)簡(jiǎn)單的通信、同步和數(shù)據(jù)交互，比如在一個(gè)網(wǎng)站的用戶設(shè)置頁面中修改用戶昵稱，那么你的所有頁面中的昵稱也都瞬間改變了。當(dāng)然，與之產(chǎn)生的注意事項(xiàng)是要回避循環(huán)修改，以免瀏覽器進(jìn)入死循環(huán)。

以上

其實(shí)對(duì)于LocalStorage還有很多細(xì)節(jié)，對(duì)HTML5感興趣的童鞋可以進(jìn)一步挖掘。來年的交流會(huì)上，我們一定還會(huì)聊到LocalStorage。到那時(shí)，我們可以再做更深入的討論和交流。

文章題目：對(duì)HTML5中LocalStorage的一些使用建議
文章轉(zhuǎn)載：http://bm7419.com/article32/psdppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、Google、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)