HTML5 的 Web Stroage

1 cookie的问题

（1）大小：cookie的大小被限制在4KB。

（2）带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

（3）复杂性：要正确地操纵cookie是很困难的。

2 Web Storage

    功能：在客户端本地保存数据。

• sessionStorage（临时保存）

（1）将数据保存在session对象中。

（2）session：指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。该对象可以用来保存在这段时间内所要求保存的任何数据。

（3）保存数据

sessionStorage.setItem(‘key‘,'value')；

sessionStorage.key = 'value';

（4）读取数据

变量 = sessionStorage.getItem('key');

变量 = sessionStorage.key;

（5）删除数据

sessionStorage.removeItem(key): 

（5）数据保存是按不同的浏览器分别进行保存的，打开别的浏览器是读取不到这个浏览器中保存的数据的。

• localStorage（永久保存）

（1）将数据保存在客户端本地的硬件设备（通常指 硬盘，也可以说其他硬件设备）中。

（2）即时浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

（3）保存数据

localStorage.setItem('key','value');

localStorage.key =  'value';

（4）读取数据

变量 = localStorage.getItem('key');

变量 = localStorage.key;

（5）删除数据

localStorage.removeItem(key): 

（6）属性

1.localStorage.length：所有保存在localStorage中的数据的条数。

2.localStorage.key（index）：

将想要得到数据的索引号作为index参数传入，可以得到localStorage中与这个索引号对应的数据的键名。（index从0开始计算）

（7）清除localStorage中的数据

localStorage.clear();

浏览器支持情况：

到目前为止：Safari5以上版本、Chrome 6以上版本、Firefox3.6以上版本、Opera10.5以上版本、IE8以上版本、支持该属性。

3 storage事件

在H5中，可以通过对window对象的storage事件进行监听并指定其事件处理函数的方法来定义当在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理

window.addEventListener('storage',function(event){
     //值变动的处理
},false);

event对象的属性

（1）event.key：

属性值为在sessionStorage或localStorage中被修改的数据键值。

（2） even.oldValue：

属性值为在sessionStorage或localStorage中被修改前的值。

（3）even.newValue：

属性值为在sessionStorage或localStorage中被修改后的值。

（4）even.url：

属性值为修改sessionStorage或localStorage中值的页面URL地址。

（5）even.storageArea：

属性值为被变动的sessionStorage对象或localStorage对象。