Html5 本地存储

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage。

if(window.localStorage){
     alert('This browser supports localStorage');
}else{
     alert('This browser does NOT support localStorage');
}

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方， sessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前的存储已经被清除。而 localStorage 是一个持久化的存储，它并不局限于会话。

sessionStorage临时保存即当浏览器关闭时，保存数据会销毁保存方法：

sessionStorage.setItem('key','value');// 或 sessionStorage.key = value;

读取方法：

变量 = sessionStorage.getItem('key') //或 变量 = sessionStorage.key;

localStorage 永久保存即将数据保存在客户端本地的硬件设备中，即使浏览器关闭，数据仍然存在。

保存方法：

localStorage.setItem('key','value'); // 或localStorage.key = 'value'

读取方法：

变量 = localStoragekey.getItem('key'); // 或localStorage.key

清除方法：

localStorage.removeItem("key");

　ps:　如果希望一次性清除所有的键值对，可以使用clear()。

　例子:

localStorage.k = 1;//设置k为"1"
localStorage["k"] = "sfsf";//设置k为"sfsf"，覆盖上面的值
localStorage.setItem("e","isaac");//设置e为"isaac"
var a1 = localStorage["k"];//获取k的值
var a2 = localStorage.k;//获取k的值
var b = localStorage.getItem("e");//获取e的值
localStorage.removeItem("c");//清除c的值

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

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本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()清除一下就可以了。

最后说一下

storage 事件

在存储事件的处理函数中是不能取消这个存储动作的。storage事件只是浏览器在数据变化发生之后给你的一个通知。我们可以在这个事件中处理当修改存储后所要执行的处理;

window.addEventListener('storage',function(){
   // 当sessionStorage 或 localSetorage 的值发生变化时所要执行的处理。 
},false)

在事件处理函数中，触发事件的事件对像（event）具有如下属性

storageArea: 表示存储类型（Session或Local）
key:发生改变项的key
oldValue: key的原值
newValue: key的新值
url*: key改变发生的URL