H5 web存储

H5提供了两种在客户端存储数据的方式：
localStorage 持久化的本地存储（浏览器关闭从新打开数据依然存在）
sessionStorage 针对一个session的本地存储
以前这些都是由cookie来完成的，cookie的特色是存储量小，在服务器和客户端之间来回传递，传输效率不高。通常能够在判断注册的用户是否登陆该本网站。
webStorage API 继承于Window对象，并提供了两个新的属性-Window.localStorage 和 Window.sessionStorage.
webStorage的优点：

1. 相比cookie存储容量增长
2. 能够将请求的表单数据存于本地，减小http请求，节约带宽
3. webStorage拥有易用的API

webStorage的局限性：

1. 不一样浏览器webStorage 和LocalStorage的大小不统一。
2. 在浏览器的隐私模式下面是不可读取的
3. 本质上是对字符串的读取，所以存储内容过多时页面会变卡
4. 不能被爬虫抓取到

使用webStorage
1.存储数据：
　　localStorage.name = 'value';
　　localStorage['name'] = 'value';
　　localStorage.setItem('name','value');
　　注意键和值老是字符串。建议使用webStorage API(setItem,getItem,removeItem,key,length)
2.获取数据：
　　var value = localStorage.getItem('name');
　　var value = localStorage.name;
　　var value = localStorage['name'];
3.删除数据：
　　清空全部数据
　　　　localStorage.clear();
　　删除特定数据；
　　　　localStorage.removeItem('name');
4.检测浏览器是否支持：
　　function storageAvailable(type) {
　　　　try {
　　　　　　var storage = window[type],
　　　　　　x = '__storage_test__';
　　　　　　storage.setItem(x, x);
　　　　　　storage.removeItem(x);
　　　　　　return true;
　　　　}
　　　　catch(e) {
　　　　　　return false;
　　　　}
　　}
　　if (storageAvailable('localStorage')) {
　　　　// Yippee! We can use localStorage awesomeness
　　}
　　else {
　　　　// Too bad, no localStorage for us
　　}
5.就是存储对象了，咱们须要进行转换为字符串存入，等到使用的时候取出再转为对象。
　　var str = JSON.stringify(obj);
　　localStorage.mydata = str;
　　var obj = JSON.parse(localStorage.mydata);

6.监听 storage 事件

能够经过监听 window 对象的 storage 事件并指定其事件处理函数，当页面中对 localStorage 或 sessionStorage 进行修改时，则会触发对应的处理函数。

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
触发事件的时间对象（e 参数值）有几个属性：

key : 键值。
oldValue : 被修改前的值。
newValue : 被修改后的值。
url : 页面url。
storageArea : 被修改的 storage 对象。
注意：在谷歌浏览器中，须要在不一样标签页中修改 storage 才会触发该事件，即 网页A 监听该事件，在 网页B 中修改 localStorage，则 网页A 会触发事件函数。可是在 IE 中，在同个网页修改 localStorage 都会触发该事件。

调试

谷歌浏览器自带调试工具(chrome devtools)很是好用，能够用来调试 localStorage 和 sessionStorage。打开浏览器按f12调出调试工具，能够看到 Application ，点击打开能够看到左边栏有 Storage，包括了 localStorage、sessionStorage、IndexedDB等，选中咱们要调试的网站域名，能够看到右边有对应的 key 和 value，能够经过右键进行编辑或删除等。

兼容

IE8 以上就兼容，可是比较特别，须要在服务器上打开的才支持，直接双击打开文件的 file:// 是不兼容的。

到了 IE11 才支持 file:// 下打开的，其余浏览器的支持程度都很高，包括在手机上的兼容。具体兼容可查看：http://caniuse.com/#search=localstorage