web存储:易于使用、支持大容量(但非无限量)数据存储同时兼容当前所有主流浏览器(不包括早期浏览器)
localStorage与sessionStorage,这两个都代表着同一个Storage对象——一个持久化关联数组,两者的主要区别在于存储的有效期和作用域不同
存储有效期及作用域:
- localStorage对象:数据存储的有效期是永久的,除非Web应用可以删除存储的数据,或者通过用户设置浏览器配置来删除。localStorage对象的作用域是限定在文档源级别的。文档源是通过协议(如http)、主机(如www.baidu.com)以及端口(如:8080)三者确定的。同源的文档共享同样的localStorage对象,可以互相读取并覆盖数据。不同浏览器是不共享同一个localStorage对象的。
- 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); }
- setItem():将对应的名字和值传递进去,可以实现数据存储。
对象和数组通常来讲值都是可变的,但为了不影响到存储对象的值,存储对象要求存储他们的副本
localStorage.o = {x:1}; localStorage.o.x = 2;//试图修改对象的属性值 localStorage.o.x //=>1:x的值并没有变
localStorage.getItem("o").x = 2;//获取到副本的值
存储事件:无论什么时候存储在localStorage或者sessionStorage的数据发生改变,浏览器都会在其他对该数据可见的窗口对象上触发存储事件(但是,在对数据进行改变的窗口对象上是不会触发的)。sessionStorage对象只有当改变相连窗口时才会触发事件。 注意:只有当存储数据真正反生改变的时候才会触发存储事件。如果设置童颜的值,或者上删除一个不存在的存储项是不会触发存储事件的。
- key属性:被设置或者移出的项的名字或者和键名。如果调用clear()方法,那么该属性值为null;
- newValue:保存该项的新值;或者调用removeItem()时,该属性为null;
- oldValue:改变或者删除该项前,保存该项原先的值;当插入一个新项的时候,该属性值为null;
- storageArea:好比window.localStorage(window.sessionStorage);
- url:触发该存储变化标本所在文档的URL;
需要注意的是:localStorage对象和存储事件都是采用广播机制的,浏览器会对目前正在访问同意站点的所有窗口发送消息。比如用户要求网站停止动画效果,那么存储对象会存储首选项。那么再次打开时会自动停止动画效果,其它相同站点的也是。