Web存储小结

一、简述

“web存储”机制是一种通过字符串形式的key/value对来安全存储和使用数据的方法。提供了一种新的、可以同时在线或离线使用的网络应用程序。

二、比较

一个cookie至多能存储4KB信息，是暂时性的存储。

web存储则可以更大，对于每个存储区域，可以达到10MB，是永久性的存储。

三、本地存储和本地会话

localStorage：本地存储，没有时间限制的数据存储。

sessionStorage：会话存储，针对一个会话期的数据存储。

四、localStorage

localStorage存储的数据没有时间限制，一年以后，数据依然可用。

创建和访问localStorage

var oStorage = window.localStorage;

oStorage.name="<b>Adiss Lu</b>;

使用window.localStorage属性可用返回与当前域对应的本地存储区域，本地存储区域维护着各种共有或者私有的、可用作长期保存数据的存储空间。可用Chrome的developer tool或firebug查看

五、sessionStorage

window.sessionStorage属性返回在当前页面会话有效期内创建的会话存储区域，只要浏览器没有关闭，一个页面的会话就会始终保持着。

六、Storage接口

支持html5的浏览器都实现了Storage接口。用上面两个属性都能返回一个Storage对象。Storage机制是通过字符串形式的key/value对来存储的。

  //设置key值

  obj_Storage.key=value;

  //获取key值

  value = obj_Storage.key;

  //获取索引位置的键名

  obj_Storage.key(index);

  //获取键对应值

  obj_Storage.getItem(sKey);

  //清除指定的key/value对

  obj_Storage.removeItem(sKey)

  //添加新键和更新值

  obj_Storage.setItem(sKey,sValue)

  //清除存储

  obj_Sorage.clear()

注意：如果键值的大小超出了存储区域允许的大小，那么就会抛出Out of memory异常，因此在应用方法之前最好使用remainingSpace属性检测存储空间。

七、Storage事件

当使用的存储区域发生变化时还可能触发Storage事件，使用window.onstorage可以捕捉该事件。

如果目标文档不处于活动状态，那么事件不会触发。Storage.setItem、Storage.removeItem和Storage.clear方法都可以触发该事件。

事件对象event可以获取如下属性：

event.key:表示被更改的键

event.oldValue：表示被更改的旧值

event.newValue：表示被更改的新值

event.url：表示发生更改所在的网址

event.storageArea：表示发生更改所在的Storage对象