首先您可以看一下《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ù)遍歷，例如下面的代碼：

1	var storage = window.localStorage;

2	for (var i=0, len = storage.length; i < len; i++){

3	var key = storage.key(i);

4	var value = storage.getItem(key);

5	console.log(key + "=" + value);

6

}

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

轉(zhuǎn)載于:https://www.cnblogs.com/shihao/archive/2011/12/23/2298854.html

總結(jié)

以上是生活随笔為你收集整理的html5客户端本地存储之sessionStorage及storage事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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