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>