localStorage和sessionStorage API

两者都是浏览器端存储数据的接口。除了存储时长，两者完全一致。

不同点：

SessionStorage存储的数据只能用于一次会话(session)，当会话结束(浏览器关闭)，数据清空；

而LocalStorage长期存在。

1. 特点

1. 以键值对存储；且以文本形式（字符串形式）存储。

2. 读取时存在跨域问题；只能被同域下网页读取。

3. 不同浏览器中，存储量在2.5-10M之间。

2. 实例属性

只有一个length属性

查看存储的个数

localStorage.length
sessionStorage.length

3. 实例方法

1. setItem(key, value)

其中key, value都是字符串

localStorage.setItem('a', 'b');
sessionStorage.setItem('key', 'value');
// 也可以直接赋值
localStorage.b = 'c';
sessionStorage['c'] = 'd';

2. getItem(key)

获取key对应的值

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

3. removeItem(key)

删除key对应的值

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4. clear()

清空所有存储的值

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

5. key(Index)

index是0-N的数值，表示第N个存储的内容；

可以配合length属性进行遍历。

4. storage事件

数据存储会触发storage事件。该事件不能在发生变化的页面监听，只能在同一域名下的不同窗口监听。

通过该事件，可以实现窗口之间的通信。

window.addEvenetListener('storage', function(event) {
    // event有多个属性
    /*
     1. event.key   存储的name，如'a'
     2. event.oldValue
     3. event.newValue
     4. event.storageArea 所有的值，如{b: "c", a: "b", length: 2}
     5. event.url  触发事件的页面的url
    */
})