今天小試一下html5中引入的localStorage特性(后來查了下localStorage應該是W3C中Web Storage的一部分,而不是Html5), 這個特性在IE8+中也已支持,其他的瀏覽器應該都已支持(像chrome, firefox一般都會自動升級到最新). 在學習的過程中也參考了一些文章,比如 Diveintohtml5系列 和 html5demos系列 .總之網上的資源還是很多的.下面就拿出我比較簡單的測試代碼來 說明一下.

首先來段工具代碼, 這段放在外部js中在中引入

1 // 探測瀏覽器是否支持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 // 一段老生常談的添加事件通用方法, 不過這樣寫更巧妙些 11 // addEvent會初始化為適合當前瀏覽器的方法 12 // 不用每次都判斷, 而且對IE中eventHandler的調用做了小小的改進 13 // 讓eventHandler的執行context為觸發事件的元素 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 })();

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

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

下面來看頁面A.html中的js代碼

1 if(isSupportLocalStorage()) { 2 // 清除所有存儲的key,value值 3 // localStorage.clear(); 4 5 var dataInput = document.getElementById('data'), 6 saveBtn = document.getElementById('saveBtn'); 7 8 addEvent(saveBtn, 'click', function () { 9 // 按下按鈕存下當前輸入框中的值 10 localStorage.setItem('storage-event-test', dataInput.value); 11 }); 12 13 // 給window監聽storage事件 14 addEvent(window, 'storage', function (event) { 15 // 查看event對象內容 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 // 存儲數字 22 localStorage.setItem('number', 1); 23 // 存儲對象 因為localStorage最終都是以String來存儲的 所以如果要存儲對象 可以覆寫它的toString方法 24 // 按照你想要的字符串格式來存儲, 然后取出后再做相應的處理, 這里就拿json格式做個例子 25 localStorage.setItem('obj', "{'name':'Andrew', 'job': 'Developer'}"); 26 // 常規的存儲 27 localStorage.setItem('string', 'hello world'); 28 29 } else { 30 // 這里可以做些降級的方案, 當然也可以給出一個不支持的提示 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 }

再來看一下B.html中的js代碼, 基本和A.html中的相同, 只是中間一段存儲代碼改成讀取而已, 比較簡單

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監聽storage事件 12 addEvent(window, 'storage', function (event) { 13 // 查看event對象內容 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 // 取出來也是String類型的, 要用parseInt轉換下 20 console.log(parseInt(localStorage.getItem('number'))); 21 // 取出來的json格式字符串要用eval解析一下 轉換成對象 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中進行測試,一開始還遇到了一個可笑的問題, 沒有通過啟動本地的運用服務器來訪問(以http://localhost:8080/...),直接是個靜態頁面(以file:///"形式), 在firebug下搞了半天也沒看到window下的localStorage屬性,而且storage事件也根本不觸發.放到IE9中,F12開發者工具的調試輸出面板中直接報個錯, localStorage為null或未定義. 后來google了一下,在stackoverflow中找到了答案, localStorage要通過域名訪問的方式才能起作用.總算能繼續進行下去了: )

在firefox5中存儲和讀取都是正常的, 但是對storage事件的觸發似乎有點問題, 自身頁面進行setItem后沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一 "起源" 下其他頁面window的storage事件,這看起來似乎更讓人想的通些.

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

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

• 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

我所預期的結果是,兩個頁面應該共享同一個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

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

在IE9里發現一個問題,相同的key,不管你value是否與之前一樣,都會觸發storage事件,而firefox中不會,只有當value與之前不同時,才會觸發.

轉載于:https://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

總結

以上是生活随笔為你收集整理的初试WebStorage之localstorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。