JavaScript本地存储(2) : IE Only的userData

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

上次我们提到了本地存储的一个方式,那就是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了。

关于UserData这个类的具体操作和先前讲的Cookie一样,这里就不举例了。

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!
请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*