IE Only的userData

上次我们提到了本地存储的一个方式，那就是Cookie，不过遗憾的是Cookie保存的数据量非常小，更详细的可以参考《在 Internet Explorer 中的 cookie 的数字和大小限制》，而且我们还要冒着用户禁用Cookie的风险，那么有没有变通的方法呢，微软为我们提供了一个类似的功能userData来帮助我们实现本地存储。

浏览器支持 : IE5.0 或以上

• 基本语法 :
  XML: <Prefix: CustomTag id=sID style="behavior:url('#default#userData')" />
  HTML: <ELEMENT style="behavior:url('#default#userData')" id=sID>
• Script: 
  object.style.behavior = "url('#default#userData')" 
  object.addBehavior ("#default#userData")
• 属性: 
  expires 设置或者获取 userData behavior 保存数据的失效日期。
  XMLDocument 获取 XML 的引用。
• 方法: 
  getAttribute() 获取指定的属性值。
  load(object) 从 userData 存储区载入存储的对象数据。
  removeAttribute() 移除对象的指定属性。
  save(object) 将对象数据存储到一个 userData 存储区。
  setAttribute() 设置指定的属性值。

要使用userData存储功能，必须先建立一个HTML标签，然后将behavior:url('#default#userData')样式属性加上去，等于说userData是寄存于HTML标签的，当然不是所有标签都是可以的，仅限于部分标签。要了解更多的信息可以访问MSDN的《userData Behavior》。

下面我们基于先前讲解的IStorage接口，实现UserData这个类。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

var UserData = function() { this.userData = null; this.name = location.hostname; //this.name = "wangye.org";   if (!this.userData) { try { this.userData = document.createElement('INPUT'); this.userData.type = "hidden"; this.userData.style.display = "none"; this.userData.addBehavior ("#default#userData"); document.body.appendChild(this.userData); var expires = new Date(); expires.setDate(expires.getDate()+365); this.userData.expires = expires.toUTCString(); } catch(e) { } }   this.setItem = function(key, value) { this.userData.load(this.name); this.userData.setAttribute(key, value); this.userData.save(this.name); }   this.getItem = function(key) { this.userData.load(this.name); return this.userData.getAttribute(key); }   this.remove = function(key) { this.userData.load(this.name); this.userData.removeAttribute(key); this.userData.save(this.name); } }

在这里我有必要说明一下，this.name这里指定了userData存储文件的文件名，这里我们指定为location.hostname，不过大家在本地测试时可能会遇到location.hostname为空的情况，这样会导致下面的脚本执行出错，因为不能指定一个空文件名，这时我们可以硬编码个文件名供我们测试。接下来我们通过createElement动态创建一个input元素作为我们userData的宿主，然后设置过期时间，这点类似于Cookie的过期时间，我们设置为当前时间+365天。接下来就可以通过load加载，然后对键值进行相关操作，然后再save了。