html5客戶端本地存儲之sessionStorage及storage事件 – WEB前端開發(fā)
首先您可以看一下《
JavaScript本地存儲實(shí)踐(html5的localStorage和ie的userData)
》
sessionStorage和上文中提到的localStorage非常相識,方法也幾乎一樣:
非常通俗易懂的接口:

- sessionStorage.getItem(key):獲取指定key本地存儲的值
- sessionStorage.setItem(key,value):將value存儲到key字段
- sessionStorage.removeItem(key):刪除指定key本地存儲的值
- sessionStorage.length是sessionStorage的項(xiàng)目數(shù)
直接上demo: http://www.css88.com/demo/sessionStorage/
sessionStorage與 localStorage 的異同
sessionStorage 和 localStorage 就一個不同的地方,?sessionStorage數(shù)據(jù)的存儲僅特定于某個會話中,也就是說數(shù)據(jù)只保持到瀏覽器關(guān)閉,當(dāng)瀏覽器關(guān)閉后重新打開這個頁面時,之前的存儲已經(jīng)被清除。而 localStorage 是一個持久化的存儲,它并不局限于會話。
sessionStorage和localStorage提供的key()和length可以方便的實(shí)現(xiàn)存儲的數(shù)據(jù)遍歷,例如下面的代碼:
[code=”javascript”]
var storage = window.localStorage;
for (var i=0, len = storage.length; i
< len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
[/code]
sessionStorage 和 localStorage的clear()函數(shù)的用于清空同源的本地存儲數(shù)據(jù),比如localStorage.clear(),它將刪除所有同源的本地存儲的localStorage數(shù)據(jù),而對于Session Storage,它只清空當(dāng)前會話存儲的數(shù)據(jù)。
關(guān)閉頁面會導(dǎo)致 sessionStorage 的數(shù)據(jù)被清除,但刷新或重新打開新頁面數(shù)據(jù)還是存在,如果需要存儲的只是少量的臨時數(shù)據(jù)。我們可以使用sessionStorage?。或者做頁面間的小交互。
sessionStorage 和 localStorage具有相同的方法storage事件,在存儲事件的處理函數(shù)中是不能取消這個存儲動作的。存儲事件只是瀏覽器在數(shù)據(jù)變化發(fā)生之后給你的一個通知。當(dāng)setItem(),removeItem()或者clear() 方法被調(diào)用,并且數(shù)據(jù)真的發(fā)生了改變時,storage事件就會被觸發(fā)。注意這里的的條件是數(shù)據(jù)真的發(fā)生了變化。也就是說,如果當(dāng)前的存儲區(qū)域是空的,你再去調(diào)用clear()是不會觸發(fā)事件的。或者你通過setItem()來設(shè)置一個與現(xiàn)有值相同的值,事件也是不會觸發(fā)的。當(dāng)存儲區(qū)域發(fā)生改變時就會被觸發(fā),這其中包含許多有用的屬性:
- storageArea : 表示存儲類型(Session或Local)
- key :發(fā)生改變項(xiàng)的key
- oldValue : key的原值
- newValue : key的新值
- url* : key改變發(fā)生的URL
* 注意: url 屬性早期的規(guī)范中為uri屬性。有些瀏覽器發(fā)布較早,沒有包含這一變更。為兼容性考慮,使用url屬性前,你應(yīng)該先檢查它是否存在,如果沒有url屬性,則應(yīng)該使用uri屬性
如果調(diào)用clear()方法,那么key、oldValue和newValue都會被設(shè)置為null。
PS.在firefox和chrome中存儲和讀取都是正常的, 但是對storage事件的觸發(fā)似乎有點(diǎn)問題, 自身頁面進(jìn)行setItem后沒有觸發(fā)window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進(jìn)行 setItem能觸發(fā)B頁面中window的storage事件, 同樣的在B頁面中進(jìn)行setItem能觸發(fā)A頁面中window的storage事件. 在IE9中, 頁面自身的設(shè)值能觸發(fā)當(dāng)前頁面的storage事件,同樣當(dāng)前頁面的設(shè)值能觸發(fā)同一”起源”下其他頁面window的storage事件,這看起來似乎更讓人想的通些.
直接上demo,同事打開這兩個頁面(代碼一模一樣):
http://www.css88.com/demo/sessionStorage/index2.html?
http://www.css88.com/demo/sessionStorage/index3.html?
感謝:Mr.Prime在storage事件上給予的幫助,另外推薦一下他寫的關(guān)于storage的博文: http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html