今天小試一下html5中引入的localStorage特性(后來(lái)查了下localStorage應(yīng)該是W3C中Web Storage的一部分,而不是Html5), 這個(gè)特性在IE8+中也已支持,其他的瀏覽器應(yīng)該都已支持(像chrome, firefox一般都會(huì)自動(dòng)升級(jí)到最新). 在學(xué)習(xí)的過(guò)程中也參考了一些文章,比如 Diveintohtml5系列 和 html5demos系列 .總之網(wǎng)上的資源還是很多的.下面就拿出我比較簡(jiǎn)單的測(cè)試代碼來(lái) 說(shuō)明一下.

首先來(lái)段工具代碼, 這段放在外部js中在中引入

1 // 探測(cè)瀏覽器是否支持localStorage 2 var isSupportLocalStorage = function() { 3 try { 4 return 'localStorage' in window && window['localStorage'] != null; 5 } catch (e) { 6 return false; 7 } 8 }; 9 10 // 一段老生常談的添加事件通用方法, 不過(guò)這樣寫(xiě)更巧妙些 11 // addEvent會(huì)初始化為適合當(dāng)前瀏覽器的方法 12 // 不用每次都判斷, 而且對(duì)IE中eventHandler的調(diào)用做了小小的改進(jìn) 13 // 讓eventHandler的執(zhí)行context為觸發(fā)事件的元素 14 var addEvent = (function() { 15 if(document.addEventListener) { 16 return function(el, type, fn) { 17 if(el && el.nodeName || el === window) { 18 el.addEventListener(type, fn, false); 19 } else if (el && el.length) { 20 for(var i = 0; i < el.length; i++) { 21 addEvent(el[i], type, fn); 22 } 23 } 24 }; 25 } else { 26 return function(el, type, fn) { 27 if(el && el.nodeName || el === window) { 28 el.attachEvent('on' + type, function() { 29 return fn.call(el, window.event); 30 }); 31 } else if (el && el.length) { 32 for(var i = 0; i < el.length; i++) { 33 addEvent(el[i], type, fn); 34 } 35 } 36 }; 37 } 38 })();

下面是配合測(cè)試的html代碼, 測(cè)試一共兩個(gè)頁(yè)面A和B,訪問(wèn)方式是http://localhost:8080/FrontEnd/A.html(B.html), html部分都是相同的. 一個(gè)輸入框,一個(gè)按鈕

1 <input id="data" type="text" name="data" /> 2 <button id="saveBtn">save</button>

下面來(lái)看頁(yè)面A.html中的js代碼

1 if(isSupportLocalStorage()) { 2 // 清除所有存儲(chǔ)的key,value值 3 // localStorage.clear(); 4 5 var dataInput = document.getElementById('data'), 6 saveBtn = document.getElementById('saveBtn'); 7 8 addEvent(saveBtn, 'click', function () { 9 // 按下按鈕存下當(dāng)前輸入框中的值 10 localStorage.setItem('storage-event-test', dataInput.value); 11 }); 12 13 // 給window監(jiān)聽(tīng)storage事件 14 addEvent(window, 'storage', function (event) { 15 // 查看event對(duì)象內(nèi)容 16 // console.dir(event); 17 // 輸出oldValue和newValue 以作觀察 18 console.log('key: %s, old value: %s, new value: %s', event.key, event.oldValue, event.newValue); 19 }); 20 21 // 存儲(chǔ)數(shù)字 22 localStorage.setItem('number', 1); 23 // 存儲(chǔ)對(duì)象 因?yàn)閘ocalStorage最終都是以String來(lái)存儲(chǔ)的 所以如果要存儲(chǔ)對(duì)象 可以覆寫(xiě)它的toString方法 24 // 按照你想要的字符串格式來(lái)存儲(chǔ), 然后取出后再做相應(yīng)的處理, 這里就拿json格式做個(gè)例子 25 localStorage.setItem('obj', "{'name':'Andrew', 'job': 'Developer'}"); 26 // 常規(guī)的存儲(chǔ) 27 localStorage.setItem('string', 'hello world'); 28 29 } else { 30 // 這里可以做些降級(jí)的方案, 當(dāng)然也可以給出一個(gè)不支持的提示 31 var span = document.createElement("span"); 32 span.style.color = 'red'; 33 span.innerHTML = 'oops, your browser dones\'t support localStorage yet, :('; 34 document.getElementsByTagName('body')[0].appendChild(span); 35 }

再來(lái)看一下B.html中的js代碼, 基本和A.html中的相同, 只是中間一段存儲(chǔ)代碼改成讀取而已, 比較簡(jiǎn)單

1 if(isSupportLocalStorage()) { 2 //localStorage.clear(); 3 4 var dataInput = document.getElementById('data'), 5 saveBtn = document.getElementById('saveBtn'); 6 7 addEvent(saveBtn, 'click', function () { 8 localStorage.setItem('storage-event-test', dataInput.value); 9 }); 10 11 // 給window監(jiān)聽(tīng)storage事件 12 addEvent(window, 'storage', function (event) { 13 // 查看event對(duì)象內(nèi)容 14 // console.dir(event); 15 // 輸出oldValue和newValue 以作觀察 16 console.log('key: %s, old value: %s, new value: %s', event.key, event.oldValue, event.newValue); 17 }); 18 19 // 取出來(lái)也是String類型的, 要用parseInt轉(zhuǎn)換下 20 console.log(parseInt(localStorage.getItem('number'))); 21 // 取出來(lái)的json格式字符串要用eval解析一下 轉(zhuǎn)換成對(duì)象 22 console.dir(eval('(' + localStorage.getItem('obj') + ")")); 23 // 普通的讀取 24 console.log(localStorage.getItem('string')); 25 26 } else { 27 var span = document.createElement("span"); 28 span.style.color = 'red'; 29 span.innerHTML = 'oops, your browser dones\'t support localStorage yet, :('; 30 document.getElementsByTagName('body')[0].appendChild(span); 31 }

我先在firefox5中進(jìn)行測(cè)試,一開(kāi)始還遇到了一個(gè)可笑的問(wèn)題, 沒(méi)有通過(guò)啟動(dòng)本地的運(yùn)用服務(wù)器來(lái)訪問(wèn)(以http://localhost:8080/...),直接是個(gè)靜態(tài)頁(yè)面(以file:///"形式), 在firebug下搞了半天也沒(méi)看到window下的localStorage屬性,而且storage事件也根本不觸發(fā).放到IE9中,F12開(kāi)發(fā)者工具的調(diào)試輸出面板中直接報(bào)個(gè)錯(cuò), localStorage為null或未定義. 后來(lái)google了一下,在stackoverflow中找到了答案, localStorage要通過(guò)域名訪問(wèn)的方式才能起作用.總算能繼續(xù)進(jìn)行下去了: )

在firefox5中存儲(chǔ)和讀取都是正常的, 但是對(duì)storage事件的觸發(fā)似乎有點(diǎn)問(wèn)題, 自身頁(yè)面進(jìn)行setItem后沒(méi)有觸發(fā)window的storage事件, 但是同時(shí)訪問(wèn)A.html和B.html, 在A頁(yè)面中進(jìn)行 setItem能觸發(fā)B頁(yè)面中window的storage事件, 同樣的在B頁(yè)面中進(jìn)行setItem能觸發(fā)A頁(yè)面中window的storage事件. 在IE9中, 頁(yè)面自身的設(shè)值能觸發(fā)當(dāng)前頁(yè)面的storage事件,同樣當(dāng)前頁(yè)面的設(shè)值能觸發(fā)同一 "起源" 下其他頁(yè)面window的storage事件,這看起來(lái)似乎更讓人想的通些.

關(guān)于"起源"這個(gè)詞 Dev.Opera-WebStorage 中用的是origin. 我就姑且把origin翻譯成蹩腳的"起源"吧, 文章最后關(guān)于web storage的注意點(diǎn)里有這么一句: Storage per origin:All storage from the same origin will share the same storage space 并且要 協(xié)議 + 域名 + 端口 一樣才能算同一origin, 這個(gè)origin下的頁(yè)面才能共享一個(gè)storage space. 有興趣的可以去讀下此文章.

還有firefox中跨頁(yè)面觸發(fā),好像也有些讓人不解. 我的測(cè)試結(jié)果是這樣的(dataInput.value直接用字符串進(jìn)行代替):

• A中 setItem('storage-event-test', 'aaaa') -> B的console輸出oldValue: , newValue: aaaa
• B中 setItem('storage-event-test', 'bbbb') -> A的console輸出oldValue: , newValue: bbbb
• A中 setItem('storage-event-test', 'cccc') -> B的console輸出oldValue: aaaa, newValue: cccc
• B中 setItem('storage-event-test', 'dddd') -> A的console輸出oldValue: bbbb, newValue: dddd

我所預(yù)期的結(jié)果是,兩個(gè)頁(yè)面應(yīng)該共享同一個(gè)storageArea

• A中 setItem('storage-event-test', 'aaaa') -> B的console輸出oldValue: , newValue: aaaa
• B中 setItem('storage-event-test', 'bbbb') -> A的console輸出oldValue: aaaa, newValue: bbbb
• A中 setItem('storage-event-test', 'cccc') -> B的console輸出oldValue: bbbb, newValue: cccc
• B中 setItem('storage-event-test', 'dddd') -> A的console輸出oldValue: cccc, newValue: dddd

這個(gè)結(jié)果一看就是不怎么對(duì)勁, 好像localStorage中的storageArea是各自獨(dú)立的,而非對(duì)于同一個(gè) "起源" 共享的.但是A頁(yè)面中的那段存儲(chǔ)在B頁(yè)面中卻能正常讀取. 在IE9下結(jié)果是我所預(yù)期的那種. 所以搞到最后我就納悶了難道是firefox的bug還是我對(duì)localStorage的理解還有出入, 如果有園友知道其中的緣由, 希望能留言指導(dǎo)一下, 先謝謝了.

在IE9里發(fā)現(xiàn)一個(gè)問(wèn)題,相同的key,不管你value是否與之前一樣,都會(huì)觸發(fā)storage事件,而firefox中不會(huì),只有當(dāng)value與之前不同時(shí),才會(huì)觸發(fā).

轉(zhuǎn)載于:https://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

總結(jié)

以上是生活随笔為你收集整理的初试WebStorage之localstorage的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。