HTML5 LocalStorage 本地存储原理详解

　　首先天然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该能够很清楚的辨认两者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。两者用法彻底相同，这里以localStorage为例。

　　if(window.localstorage){

　　alert('this brower supports localstorage');

}else{

　　alert('this brower not supports localstorage)

}

　　存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操做方法很简单，是以键值对的方式存在的，以下：

　　localStorage.setItem("a","isaac");//设置a的值为"isaac"

　　var a = localStorage.getItem("a");//获取a的值

　　localStorage.removeItem("a");//清除a的值

　　最推荐使用的天然是getItem()和setItem()，清除键值对使用removeItem()。若是但愿一次性清除全部的键值对，可使用clear()。另外，HTML5还提供了一个key()方法，能够在不知道有哪些键值的时候使用，以下：

　　var  storage = window.localStorage;

　　function showStorage(){

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

　　//key(i)得到相应的键，再用getItem得到相应的键值　　　　

　　document.write(storage.key(i)+":"+storage.getItem(storage.key(i))+"<br>")

　　}

}

　　须要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，因此读取的时候，须要本身进行类型的转换。这也就是上一段代码中parseInt必需要使用的缘由。

　　另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时通常在setItem以前，先removeItem()就ok了。