HTML5本地存储 LocalStorage和SessionStorage

了解HMLT5的同学，对本地存储的强大功能应该都不会陌生，因为它比之前的cookie和session实在是好用太多了。。。

Cookies的用法相对比较麻烦，并且还有个致命的弱点，就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。所以html5中本地存储的出现也算是程序员的福音啦。

好了，废话不多说了，直接上干货：

HTML5中本地存储分为sessionStorage 和 localStorage，二者的区别：
sessionStorage数据的存储在某个会话中，也就是说当浏览器关闭后重新打开这个页面时，之前的保存已经被清除。而localStorage 是一个持久化的存储，它会一直存在，除非手动删除。

sessionStorage和localStorage可以通过数据遍历操作存储的数据，例如：

var storage = window.localStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

本地存储的具体使用：

第一步：检测浏览器是否支持本地存储，这里以localStorage为例

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

第二步：异常简化的读取、写、删除等操作

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

推荐使用方便好用的操作方法： getItem()和setItem()， 清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。

PS：HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。