web存储

web存储：易于使用、支持大容量（但非无限量）数据存储同时兼容当前所有主流浏览器（不包括早期浏览器）

localStorage与sessionStorage，这两个都代表着同一个Storage对象——一个持久化关联数组，两者的主要区别在于存储的有效期和作用域不同

存储有效期及作用域：

1. localStorage对象：数据存储的有效期是永久的，除非Web应用可以删除存储的数据，或者通过用户设置浏览器配置来删除。localStorage对象的作用域是限定在文档源级别的。文档源是通过协议（如http）、主机（如www.baidu.com）以及端口（如：8080）三者确定的。同源的文档共享同样的localStorage对象，可以互相读取并覆盖数据。不同浏览器是不共享同一个localStorage对象的。
2. sessionStorage对象：数据存储的有效期是和存储数据的脚本所在的最顶层的窗口（顶级窗口）或者浏览器标签页是一样的。一旦窗口或者标签页被关闭了，那么所有通过sessionStorage对象存储的数据也都会删除。（现代浏览器是可以恢复最近关闭的标签页的，所以寿命可能会增长）。sessionStorage对象的作用域也是在相同文档源中的，不仅如此，sessionStorage对象还被限定在窗口中，如果同源的文档渲染在不同的浏览器标签页中，他们拥有的sessionStorage对象是不同的，无法共享。

存储API：这两种存储对象拥有相同的存储API

setItem()：将对应的名字和值传递进去，可以实现数据存储。
```
localStorage.setItem('x',1);//以‘x’的名字存储一个数值
```

getItem()：传递名字可以获取数值

localStorage.getItem('x');//以‘x’的名字获取一个数值

removeItem()：传递名字，删除对应数据

localStorage.removeItem('x');//以‘x’的名字删除一个数值，在非IE8中还能使用delete操作符

clear()：清空所有存储的数据
```
localStorage.clear();
```

key()：可以枚举所有存储数据的名字

for(var i = 0;i < localStorage.length;i++){
       var name = localStorage.key(i);
       var value = localStorage.getItem(name);
}

对象和数组通常来讲值都是可变的，但为了不影响到存储对象的值，存储对象要求存储他们的副本

localStorage.o = {x:1};
localStorage.o.x = 2;//试图修改对象的属性值
localStorage.o.x  //=>1:x的值并没有变

localStorage.getItem("o").x = 2;//获取到副本的值

存储事件：无论什么时候存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其他对该数据可见的窗口对象上触发存储事件（但是，在对数据进行改变的窗口对象上是不会触发的）。sessionStorage对象只有当改变相连窗口时才会触发事件。注意：只有当存储数据真正反生改变的时候才会触发存储事件。如果设置童颜的值，或者上删除一个不存在的存储项是不会触发存储事件的。

1. key属性：被设置或者移出的项的名字或者和键名。如果调用clear()方法，那么该属性值为null；
2. newValue：保存该项的新值；或者调用removeItem()时，该属性为null；
3. oldValue：改变或者删除该项前，保存该项原先的值；当插入一个新项的时候，该属性值为null；
4. storageArea：好比window.localStorage（window.sessionStorage）；
5. url：触发该存储变化标本所在文档的URL；

需要注意的是：localStorage对象和存储事件都是采用广播机制的，浏览器会对目前正在访问同意站点的所有窗口发送消息。比如用户要求网站停止动画效果，那么存储对象会存储首选项。那么再次打开时会自动停止动画效果，其它相同站点的也是。