作者：心叶
时间：2018-05-01 18:30
H5提供了二种非常好用的本地存储方法：sessionStorage和localStorage，下面分别介绍一下：
1.sessionStorage：保存的是一个会话的数据，也就是说只在一次会话中有效，关闭就会销毁数据，不是持久的本地数据存储，只是一个会话的存储；
2.localStorage：本地数据持久化存储，在操作上和第一种没有什么区别，只是存储时间上不同。
第一步：基本操作。
1.把value存储到key字段：.setItem( key, value)。
sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");2.获取指定key本地存储的值：.getItem(key)。
var value=sessionStorage.getItem("key");
var value=localStorage.getItem("key");3.删除指定key本地存储的值：.removeItem( key)。
sessionStorage.removeItem("key");
localStorage.removeItem("key");4.清除所有的key/value：.clear()。
sessionStorage.clear();
localStorage.clear();
第二步：其它操作。
storage除了可以用上面说到的方法获取和存储数据，还可以和普通的对象一样，使用点操作和[]来控制数据（下面以localStorage为例子）：
var storage = window.localStorage;
storage.info=‘通过点设置数据‘;
//通过[]获取数据
var infoValue=storage[‘info‘];可以通过storage的key()和length实现数据的遍历：
var storage = window.localStorage;
for (var i = 0, len = storage.length; i < len; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
第三步：storage事件（针对localStorage）。
localStorage提供了一个事件storage，当键值改变或者clear的时候，就可以触发storage事件（注册storage和改变值要在不跨域的情况下存在于二个页面），如下面的例子：
//页面A.html里面的js代码（为了简化代码，注册事件没有考虑兼容性）
window.addEventListener("storage", function (event) {
alert(event.newValue);
});
//页面B.html里面的js代码
localStorage.clear();
localStorage.setItem(‘key‘, ‘value‘);
把页面A.html和B.html放正同一个域名下的HTTP服务器里，先打开A.html页面，再打开B.html页面，就可以看见效果了。
上面A.html注册事件的event对象一共有下面几个属性：
1.key：字符串类型，表示被修改，删除或添加的条目的key值；
2.oldValue：表示之前的值，如果是添加一个条目就返回null；
3.newValue：表示现在的新值，如果是添加一个条目就返回null；
4.url/uri：字符串类型，表示触发这个事件的页面地址。
