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的一个实例。

//使用方法存储数据
sessionStorage.setItem("name", "Jack");

//使用属性存储数据
sessionStorage.book = "Professional JavaScript";

//使用方法读取数据
var name = sessionStorage.getItem("name");

//使用属性读取数据
var book = sessionStorage.book;

//结合length属性和key()方法来迭代sessionStorage中的值
for(var i=0, len=sessionStorage.length; i<len; i++) {
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

//使用for-in循环来迭代sessionStorage中的值
for(key in sessionStorage) {
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

//使用delete删除一个值
delete sessionStorage.name;

//使用方法删除一个值
sessionStorage.removeItem("book");

3.localStorage对象

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

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

可以跨页面的存储访问到

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

//使用方法存储数据
localStorage.setItem("name", "Jack");

//使用属性存储数据
localStorage.book = "Professional JavaScript";

//使用方法读取数据
var name = localStorage.getItem("name");

//使用属性读取数据
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。