web端存储机制

1.storage类型

Storage类型提供最大的存储空间来存储名值对(key=value)。
它的实例与对象类似，有如下方法：

clear(): 删除所有值 。
getItem(name): 获取指定名字name，对应的值。
key(index): 获取index位置处值的名字。
removeItem(name): 删除由name指定的名值对。
clear(): 删除所有值 。
setItem(name, value): 为指定name，设置对应的值value。

2. sessionStorage对象

• sessionStorage对象存储特定于某个会话的数据，也就是该数据保持到浏览器关闭，和Cookie一样，会在浏览器关闭后消失。

• sessionStorage对象其实是Storage的一个实例。所以可以使用setItem、clear等方法，同时原型上也由Object构造,可以用属性来设置。

sessionStorage.__proto__.constructor //Storage
sessionStorage.__proto__.__proto__.constructor //Object
//使用方法存储数据
sessionStorage.setItem('name','余嘉')
//使用属性存储数据
sessionStorage.name = '余嘉';

3. localStorage对象

• localStorage对象，是持久保存客户端数据的方案对象。
• 要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效）,使用同一个协议，同一个端口。

• localStorage对象同样也是Storage的一个实例。

//使用方法存储数据
localStorage.setItem('name','余嘉')
//使用属性存储数据
localStorage.name = '余嘉';

4 . storage事件

对Storage对象进行热河修改，都会在文档上触发storage事件。
在通过属性或getItem、setItem、removeItem等方法保存或者删除数据。都会触发storage事件。这个事件的event对象有以下属性。

domain: 发生变化的存储空间的域名 。
key: 设置或者删除的键名（key）。
newValue: 如果是设置值，则是新值; 如果是删除，则是null
oldValue: 键被更改之前的值。

window.addEventListener("storage",function(e){console.log(e)});

• 发现Chrome下,当前页无法触发，其他页面触发却可以，IE,Firefox 没测，大家可以试试。
• 记住，要在同域名下触发。