先來介紹一下localStorage和cookie的區別：
（1）localStorage的存儲容量比cookie更大；
（2）cookie作為http規范的一部分，它的主要作用是與服務器進行交互，使http保持連接狀態。也就是你每次請求一個新的頁面的時候，cookie都會被發送過去，這樣無形中就浪費了寬帶。
（3)cookie保存是能指定可以訪問該cookie的范圍；localStorage的訪問范圍就是當前整個網站，不存在訪問范圍這個概念。且，兩者都不支持跨域調用。
html5中的Web Storage包括了兩種存儲方式： sessionStorage和localStorage；
sessionStorage用於本地存儲一個會話的數據，當會話結束時，存儲的數據也會自動銷毀（即當頁面關閉的同時也銷毀數據），因此，sessionStorage不是一個持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用於持久化的本地存儲，除非手動刪除數據，否則會一直保存。
下面是一個h5中localStorage的一個小應用：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>you have viewed this page <span id="count"></span> thimes(s).</p>
<p><input type="button" value="changeStorage" onClick="changeS()"></input></p>
<script type="text/javascript">
var storage = window.localStorage;
if(!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) +1;
document.getElementById("count").innerHTML = storage.pageLoadCount;
showStorage();
// storage事件，在存儲事件的處理函數中是不能取消這個存儲動作的，存儲事件只是瀏覽器在localStorage數據變化發
//生后給你的一個通知
if(window.addEventListener) { // 為了兼容瀏覽器或者自己寫兼容處理函數，或者干脆不用storage事件
window.addEventListener("storage", handle_storage, false); // 而是調用一個handle_storage()函數來
}else if(window.attachEvent) { // 遞歸顯示object
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e) { //
if(!e) {
e=window.event;
}
showObject(e);
}
function showObject(obj) { //遞歸顯示object
if(!obj){return;}
for(var i in obj) {
if(typeof(obj[i])!="object" || obj[i] == null) {
document.write(i + ":" + obj[i] + "<br/>");
}else {
document.write(i + ":object" + "<br/>");
}
}
}
storage.setItem("a",5);
function changeS() { //修改一個鍵值，測試storage事件
if(!storage.getItem("b")) {
storage.setItem("b",0);
}
storage.setItem('b',parseInt(storage.getItem('b'))+1);
}
function showStorage() { //循環顯示localStorage里的鍵值對
for(var i=0;i<storage.length;i++) {
//key(i)獲得相應的鍵，再用getItem()方法獲得對應的值
document.write(storage.key(i)+ ":" +storage.getItem(storage.key(i)) + "<br>");
}
}
</script>
</body>
</html>
接合網上的一篇文章對這個有我自己的一些很粗淺的看法；
localStorage本身帶有的一些本地方法：
添加鍵值對： localStorage.setItem(key,value);
獲取鍵值對： localStorage.getItem(key);
刪除鍵值對： localStorage.removeItem(key);
清除所有鍵值對： localStorage.clear();
獲取localStorage的屬性名稱（鍵名稱）： localStorage.key(index);
獲取localStorage中保存的鍵值對的數量： localStorage.length;
獲取localStorage完整鍵值對的列子：
localStorage事件
localStorage的storage事件，在存儲事件的處理函數中是不能取消這個存儲動作的。
存儲事件只是瀏覽器在localStorage數據變化發生之后給你的一個通知。注意這里的的條件是數據真的發生了變化。也就是說，如果當前的存儲區域是 空的，你再去調用clear()是不會觸發事件的。或者你通過setItem()來設置一個與現有值相同的值，事件也是不會觸發的。當存儲區域發生改變時 就會被觸發。
PS:在firefox和chrome中存儲和讀取都是正常的, 但是對storage事件的觸發似乎有點問題,chrome修改localStorage能觸發本頁面的storage事件，Firefox 自身頁面修改storage后沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件,這看起來似乎更 讓人想的通些.實例推薦PrimeTechBlog的初試WebStorage之localstorage
所以建議，為兼容瀏覽器或者自己寫兼容處理函數，或者干脆不用storage事件。
也正如下面的這一個代碼段：
這里引入showObject()函數
至於這個遞歸顯示object有什么作用還是沒有弄懂，待以后看到相關方面的知識再來補充——————！