HTML5 本地存储Web Storage
Web Storage 功能，顾名思义，就是在web上针对客户端本地存储数据的功能，具体来说Web Storage 分为两种：
sessionStorage:
将数据保存在session对象中，所谓session是指用户在浏览某个网站中，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage:
将数据保存在客户端本地的硬件设备（通常指硬盘，当然可以是其他的硬盘设备）中，即是浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时，仍然可以继续使用。
sessionStorage与localStorage区别:
这两者的区别在于sessionStorage为临时保存，而localStorage为永久保存。
对比session和cookie的区别主要体现在一下三点：
1.容量大，IE8里面是10M, 不同的浏览器支持的大小不一致。
2. 不会随着会话来传输。
3. 读取和写入方便，有现成的api
不管是sessionStorage, 还是localStorage, 可使用的API都相同，常用的有如下几个方法：
1.保存数据： localStorage.setIterm(key,value); sessionStorage.setItem(key, value);
2.读取数据： localStorage.getIterm(key); sessionStorage.getItem(key);
3.删除单个数据： localStorage.removeItem(key) sessionStorage.removeItem(key);
4.删除所有数据： localStorage.clear(); sessionStorage.clear();
两个都有属性length 表示Key的个数，也即key长度：
var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;
如上，key和value都必须为字符串，换言之，Web Storage的API只能操作字符串。
Web storage 的浏览器支持情况的判断：
在使用web storage时，首先判断是否支持该功能，有些浏览器不支持(IE)，只有支持才可以使用，判断方法如下：
if(window.localStorage){ //或者 window.sessionStorage alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined') { //或者 window.sessionStorage alert("浏览暂不支持localStorage") } Web Storage使用实例代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>HTML5 Web Storage Demo</title> <script type="text/javascript"> function $(id){ return document.getElementById(id);} function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);} function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");} function savelocalStorage(id){localStorage.setItem("message",$(id).value);} function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");} </script> </head> <body> <div> <h2>sessionStorage Demo</h2> <p id="sessionMsg"></p> <input type="text" id="sessionInput" /> <input type="button" value="保存数据" onclick="savesessionStorage('sessionInput');" /> <input type="button" value="读取数据" onclick="loadsessionStorage('sessionMsg');" /> <br /> <h2>localStorage Demo</h2> <p id="localMsg"></p> <input type="text" id="localInput" /> <input type="button" value="保存数据" onclick="savelocalStorage('localInput');" /> <input type="button" value="读取数据" onclick="loadlocalStorage('localMsg');" /> </div> </body> </html> 
参考文章：
http://www.sitepoint.com/html5-web-storage/
http://www.cnblogs.com/asqq/archive/2012/06/20/2556957.html
http://blog.csdn.net/shenzhennba/article/details/8480756