Storage接口

Storage接口用于脚本在浏览器保存数据。两个对象部署了这个接口：
window.sessionStorage和window.localStorage。
sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；
localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存的长短期限不一致，这两个对象的其他方面都一致。
属性和方法
Storage接口只有一个属性
Storage.length:返回保存的数据项个数。

window.localStorage.setItem('foo','a');
window.localStorage.setItem('bar','b');
window.localStorage.setItem('baz','c');
window.localStorage.length // 3
复制代码

Storage.setItem()
Storage.setItem()方法用于存入数据。
它接收两个参数，第一个是键名，第二个是保存的数据。第二个是保存的数据。如果键名已经存在，该方法会有更新已有的键值，该方法没有返回值。

window.sessionStorage.setItem('key','value');
window.localStorage.setItem('key','value');
复制代码

注意，Storage.setItem()两个参数都是字符串。如果不是字符串
会自动转成字符串，再存入浏览器。
window.sessionStorage.setItem(3,{ foo:1});
window.sessionStorage.getItem(‘3’)// “[object Object]”
下面三种方法等价：

// 下面三种写法等价
window.localStorage.foo ='123';
window.localStorage['foo']='123';
window.localStorage.setItem('foo','123');

复制代码

其中foo是键名，123是存储的值。

Storage.getItem()

是用于读取数据，他只有一个参数，就是键名，如果键名不存在，该法就返回null。
window.sessionStorage.getItem(‘key’)
window.localStorage.getItem(‘key’)
键名应该是一个字符串，否则会被自动转为字符串。

Storage.removeItem()

方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

Storage.clear()

Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

window.sessionStorage.clear()
window.localStorage.clear()

Storage.key()

Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值。

window.sessionStorage.setItem(‘key’,’value’);
window.sessionStorage.key(0)// “key”
结合使用Storage.length属性和Storage.key()方法，可以遍历所有的键。
for(var i =0; i < window.localStorage.length; i++){
console.log(localStorage.key(i));
}

最后一个

function onStorageChange(e) {
  console.log(e.key);
}
window.addEventListener('storage', onStorageChange);
复制代码

解析：window节点，用addEventListener方法绑定‘storage’事件的监听函数’onStorageChange’