Web存储机制

Web Storage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回给服务器。

Web Storage的两个主要目标是:

  1. 提供一种在cookie之外存储会话数据的途径
  2. 提供一种存储大量可以跨会话存在的数据的机制

1.Storage类型

Storage类型提供最大的存储空间(因浏览器而异)来存储名值对儿。Storage的实例与其他对象类似,有如下方法:

  • clear(): 删除所有值
  • getItem(name): 根据指定的名字name获取对应的值
  • key(index): 获得index位置处的值的名字
  • removeItem(name): 删除由name指定的名值对儿
  • setItem(name, value): 为指定的的name设置一个对应的值

其中,getItem()、removeItem()和setItem()方法可以直接调用,也可通过Storage对象间接调用。因为每个项目都是作为属性存储在该对象上的,所以可以通过点语法或者方括号语法访问属性来读取值,设置也一样,或者通过delete操作符进行删除。建议使用方法而不是属性来读取值,以免某个键会意外重写该对象上已经存在的成员。

还可以使用length属性来判断有多少名值对儿存放在Storage对象中。但无法判断对象中所有数据的大小。

注:Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。

2.sessionStorage对象

sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用。

因为sessionStorage对象绑定于某个服务器会话,所以文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面有限制。

sessionStorage对象是Storage的一个实例。

1 //使用方法存储数据
2 sessionStorage.setItem("name", "Jack");
3 
4 //使用属性存储数据
5 sessionStorage.book = "Professional JavaScript";
1 //使用方法读取数据
2 var name = sessionStorage.getItem("name");
3 
4 //使用属性读取数据
5 var book = sessionStorage.book;
1 //结合length属性和key()方法来迭代sessionStorage中的值
2 for(var i=0, len=sessionStorage.length; i<len; i++) {
3     var key = sessionStorage.key(i);
4     var value = sessionStorage.getItem(key);
5     alert(key + "=" + value);
6 }
1 //使用for-in循环来迭代sessionStorage中的值
2 for(key in sessionStorage) {
3     var value = sessionStorage.getItem(key);
4     alert(key + "=" + value);
5 }
1 //使用delete删除一个值
2 delete sessionStorage.name;
3 
4 //使用方法删除一个值
5 sessionStorage.removeItem("book");

3.localStorage对象

localStorage对象作为持久化保存客户端数据的方案取代了globalStorage。要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。

存储在localStorage中的数据保留到通过JavaScript删除或者是用户清除浏览器缓存。

可以跨页面的存储访问到

localStorage是Storage实例,所以可以向使用sessionStorage一样来使用它。

 1 //使用方法存储数据
 2 localStorage.setItem("name", "Jack");
 3 
 4 //使用属性存储数据
 5 localStorage.book = "Professional JavaScript";
 6 
 7 //使用方法读取数据
 8 var name = localStorage.getItem("name");
 9 
10 //使用属性读取数据
11 var book = localStorage.book;

4.storage事件

对Storage对象进行任何修改,都会在文档上触发storage事件。当通过属性或setItem()方法保存数据,使用delete操作符或removeItem()方法删除数据,或者调用clear()方法时,都会发生该事件。这个对象的event对象有如下属性:

  1. domain: 发生变化的存储空间的域名
  2. key: 设置或删除的键名
  3. newValue: 如果是设置值,则是新值;如果是删除值,则是null
  4. oldValue: 键被更改之前的值

无论对sessionStorage、localStorage进行操作都会触发storage事件,但不做区分。

5.限制

与其他客户端存储方案类似,Web Storage 同样也有限制。这些限制因浏览器而异。一般来说,对存储空间大小的限制都是以每个来源(协议、域和端口)为单位的。换句话说,每个来源都有固定大小的空间用于保存自己的数据。考虑到这个限制,就要注意分析和控制每个来源中有多少页面需要保存数据。

对于localStor而言,大多数桌面浏览器会设置每个来源5MB的限制。Chrome和Safari对每个来源的限制是2.5MB。而iOS版Safari和Android版Webkit的限制也是2.5MB。

对sessionStorage的限制也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制。但Chrome、Safari、iOS版Safari和Android版Webkit都有限制,也都是2.5MB。IE8+和 Opera对sessionStorage的限制是5MB。

 

posted @ 2020-01-22 11:25  焱雨  阅读(174)  评论(0编辑  收藏  举报