web程序客户端存储数据的常用方法

客户端存储

 

在web开发中，说到客户端数据存储，可能第一时间想到的是cookies，这是一种web开发常见的客户端存储数据的方法。它的最大优点是兼容性好，几乎所有浏览器都具有这个功能。缺点是存储量太小（4k）、数据访问不够灵活。随着Ajax的兴起和离线应用需求的增加，对本地数据存储的需求已经不是cookie可以满足的了。

从ie5+和firefox2+的web开发中，除了通用的cookie，本地存储数据还可以通过userData和sessionStorage在客户端进行存储数据。

userData的存储机制：将要保存的数据以“健值对（健作为属性，值为属性的值）”的形式保存在XML文档中。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失，除非你人为删除或者用脚本设置了该数据的失效期。

 

1、userData使用前必须在行内或者文档的HEAD部分宣告如下样式：

<STYLE>
      .userData {behavior:url(#default#userdata);}

 </STYLE>

或者使用脚本绑定：
object.style.behavior = "url('#default#userData')"
object.addBehavior ("#default#userData")

 

2、成员

expires
  设置或取得使用userData行为保存数据的失效日期。
    脚本语法：对象ID.expires = 参数
    参数是一个使用UTC（Universal Time Coordinate，世界调整时间）格式表示失效日期的字符串。该属性可以读写，没有默认值。浏览器会对比这个日期和当前日期，如果到期，该数据就自动失效。

getAttribute(key)
  取得指定的属性值。

load(存储区名)
  从UserData存储区载入存储的对象数据。

removeAttribute(key)
  从对象中删除指定的属性值。

save(存储区名)
  将对象数据存入一个UserData存储区。

setAttribute(key, value)
  设置指定的属性值。

XMLDocument
  取得存储该对象数据的XML DOM引用。

 

例：

o.setAttribute("code", "hello world!");
o.save("baidu");

实际上就是一个XML文件，通过文件名->属性的方式保存字符串。

执行后，UserData文件夹中会生成一个baidu[1].xml文件，其中的内容是：
<ROOTSTUB code="hello,world!"/>

在一个文件中可以有多个属性，也就是可以存储多种不同的数据。

 

3、firefox 2+中的seessionStorage

从firefox 2.0开始，开始支持HTML5，同时也就支持了sessionStorage，这是一个只能在session生命周期内使用的对象，最大的用途在于用于保存一些临时的数据防止用户意外刷新页面，同时，在浏览器意外关闭并恢复页面时，sessionStrorage中存储的信息也会被同时恢复。Firefox默认允许一个域名存储5120KB的数据。

 

sessionStorage中的方法：

getItem(key)  取得指定的属性值。

setItem(key) 设置指定的属性值。

removeAttribute(key)  从对象中删除指定的属性值。