首先您可以看一下《JavaScript本地存儲實踐（html5的localStorage和ie的userData）》
sessionStorage和上文中提到的localStorage非常相識，方法也幾乎一樣：

非常通俗易懂的接口:

• sessionStorage.getItem(key):獲取指定key本地存儲的值
• sessionStorage.setItem(key,value)：將value存儲到key字段
• sessionStorage.removeItem(key):刪除指定key本地存儲的值
• sessionStorage.length是sessionStorage的項目數

直接上demo：http://www.css88.com/demo/sessionStorage/

sessionStorage與 localStorage 的異同

sessionStorage 和 localStorage 就一個不同的地方，?sessionStorage數據的存儲僅特定于某個會話中，也就是說數據只保持到瀏覽器關閉，當瀏覽器關閉后重新打開這個頁面時， 之前的存儲已經被清除。而 localStorage 是一個持久化的存儲，它并不局限于會話。

sessionStorage和localStorage提供的key()和length可以方便的實現存儲的數據遍歷，例如下面的代碼：

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()函數的用于清空同源的本地存儲數據，比如localStorage.clear()，它將刪除所有同源的本地存 儲的localStorage數據，而對于Session Storage，它只清空當前會話存儲的數據。

關閉頁面會導致 sessionStorage 的數據被清除，但刷新或重新打開新頁面數據還是存在，如果需要存儲的只是少量的臨時數據。我們可以使用sessionStorage?。或者做頁面間的小交互。

sessionStorage 和 localStorage具有相同的方法storage事件，在存儲事件的處理函數中是不能取消這個存儲動作的。存儲事件只是瀏覽器在數據變化發生之后給 你的一個通知。當setItem(),removeItem()或者clear() 方法被調用，并且數據真的發生了改變時，storage事件就會被觸發。注意這里的的條件是數據真的發生了變化。也就是說，如果當前的存儲區域是空的，你 再去調用clear()是不會觸發事件的。或者你通過setItem()來設置一個與現有值相同的值，事件也是不會觸發的。當存儲區域發生改變時就會被觸 發，這其中包含許多有用的屬性：

• storageArea: 表示存儲類型（Session或Local）
• key:發生改變項的key
• oldValue: key的原值
• newValue: key的新值
• url*: key改變發生的URL

* 注意: url 屬性早期的規范中為uri屬性。有些瀏覽器發布較早，沒有包含這一變更。為兼容性考慮，使用url屬性前，你應該先檢查它是否存在，如果沒有url屬性，則應該使用uri屬性
如果調用clear()方法，那么key、oldValue和newValue都會被設置為null。
PS.在firefox和chrome中存儲和讀取都是正常的, 但是對storage事件的觸發似乎有點問題, 自身頁面進行setItem后沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件,這看起來似乎更 讓人想的通些.

直接上demo,同事打開這兩個頁面（代碼一模一樣）：

http://www.css88.com/demo/sessionStorage/index2.html?

http://www.css88.com/demo/sessionStorage/index3.html?

感謝：Mr.Prime在storage事件上給予的幫助，另外推薦一下他寫的關于storage的博文：http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

轉載于:https://www.cnblogs.com/shihao/archive/2011/12/23/2298854.html

總結

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

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