HTML5本地存儲sessionStorage和localStorage的常用操作

HTML5本地存儲
 sessionStorage //資料随着浏覽器的關閉而銷毀。
 localStorage//不主動删除,永遠不會銷毀


sessionStorage的常見用法
 <script type="text/javascript">
 //設定存儲,用途:将value存儲到key字段,用法sessionStorage.setItem(key,value);
 sessionStorage.setItem("name","和派孔明");
 sessionStorage.setItem("age",18);
 sessionStorage.setItem("address","陸家嘴金融城");

 //删除儲存,用法:删除指定key本地存儲的值,用法sessionStorage.removeItem(key);
 sessionStorage.removeItem("age");

 /*
 清除儲存,用途:清除所有的key/value,用法:sessionStorage.clear();
 sessionStorage.clear();
 */

 //擷取儲存,用途：擷取指定key本地存儲的值,用法:sessionStorage.getItem(key)
 var thisName = sessionStorage.getItem("name");
 var thisAge = sessionStorage.getItem("age");
 var thisaddress = sessionStorage.getItem("address");

alert(thisName);
alert(thisAge);
alert(thisaddress);
 </script>


localStorage的常見用法
 <script type="text/javascript">
  //設定存儲,用途:将value存儲到key字段,用法sessionStorage.setItem(key,value);
  localStorage.setItem("name","和派孔明");
  localStorage.setItem("age",18);
  localStorage.setItem("address","陸家嘴金融城");

  //删除儲存,用法:删除指定key本地存儲的值,用法sessionStorage.removeItem(key);
  localStorage.removeItem("age");

  /* 
  //清除儲存,用途:清除所有的key/value,用法:localStorage.clear();
  localStorage.clear();
  */

  //擷取儲存,用途：擷取指定key本地存儲的值,用法:sessionStorage.getItem(key)
  var thisName = localStorage.getItem("name");
  var thisAge = localStorage.getItem("age");
  var thisaddress = localStorage.getItem("address"); alert(thisName);
alert(thisAge);
alert(thisaddress);
 </script>


web Storage不僅可以用自身的setItem,getItem等友善存取，
也可以像普通對象一樣用點(.)操作符或者[]的方式進行資料存儲，如下案例：
 <script type="text/javascript">
var storage = window.localStorage; 
storage.name = "和派孔明"; 
storage["Age"] = "18"; 
alert(storage.name);
alert(storage["Age"]);
  </script>


localStorage和sessionStorage的key和length屬性實作周遊
sessionStorage和localStorage提供的key()和length可以友善的實作存儲的資料周遊，例如下面的代碼：
 <script type="text/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); 
}
</script>


storage還提供了storage事件，當鍵值改變或者clear的時候，就可以觸發storage事件，如下面的代碼就添加了一個storage事件改變的監聽： 
<script type="text/javascript">
if(window.addEventListener){ 
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
} 
function handle_storage(e){ 
if(!e){e=window.event;}
}
</script>