IE userData

前面的话

  IE浏览器实现了它专属的客户端存储机制——“userData”。userData可以实现一定量的字符串数据存储,可以将其用做是Web存储的替代方案。本文将详细介绍IE userData

 

概述

  在IE5.0中,微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多128KB数据,每个域名最多1MB数据

  [注意]IE9+浏览器不支持

  要使用持久化用户数据,首先必须如下所示,使用CSS在某个元素上指定userData行为

<div style="behavior:url(#default#userData)" id="dataStore"></div>

  或者使用动态生成元素的方式

var memory = document.createElement("div");    // 创建一个元素
memory.id = "_memory";    // 设定一个id名
memory.style.display = "none";    // 将其隐藏
memory.style.behavior = "url('#default#userData')";//附加userData行为 document.body.appendChild(memory);    // 将其添加到document元素中

 

保存数据

  一旦该元素使用了userData行为,那么就可以使用setAttribute()方法在上面保存数据了。为了将数据提交到浏览器缓存中,还必须调用save()方法并告诉它要保存到的数据空间的名字。数据空间名字可以完全任意,仅用于区分不同的数据集

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name", "Nicholas");
dataStore.setAttribute("book", "Professional JavaScript");
dataStore.save("BookInfo");

  在这段代码中,<div>元素上存入了两部分信息。在用setAttribute()存储了数据之后,调用了save()方法,指定了数据空间的名称为BookInfo

 

读取数据

  load()方法用于载入存储的数据。使用它的时候必须传递一个字符串作为参数——类似于一个文件名,该参数用来指定要载入的存储数据。当数据载入后,就可以通过该元素的属性来访问这些名/值对形式的数据,可以使用getAttribute()来査询这些数据,如下所示

dataStore.load("BookInfo");
console.log(dataStore.getAttribute("name"));//"Nicholas"
console.log(dataStore.getAttribute("book"));//"Professional JavaScript"

  对load()的调用获取了BookInfo数据空间中的所有信息,并且使数据可以通过元素访问;只有到载入确切完成之后数据方能使用。如果getAttribute()调用了不存在的名称或者是尚未载入的名称,则返回null

  [注意]IE11浏览器报错,IE9、10浏览器返回null

 

删除数据

  可以通过removeAttribute()方法明确指定要删除某元素数据,只要指定属性名称。删除之后,必须像下面这样再次调用save()来提交更改

dataStore.removeAttribute("name");
dataStore.removeAttribute("book");
dataStore.save("BookInfo");

  这段代码删除了两个数据属性,然后将更改保存到缓存中

 

有效期

  默认情况下,通过userData存储的数据,除非手动去删除它否则永不失效。但是,也可以通过设置expires属性来指定它的过期时间。比如,可以给存储的数据设置时长100天的有效期,如下所示:

var now = (new Date()).getTime();
var expires = now + 100 * 24 * 60 * 60 * 1000;
expires = new Date(expires).toUTCString();
memory.expires = expires;

  IE userData的作用域限制在和当前文档同目录的文档中。作用域没有cookie宽泛,cookie对其所在目录下的子目录也有效。userData的机制并没有像cookie那样,通过设置path和domain属性来控制或者改变其作用域的方式

  userData允许存储的数据量要比cookie大,但是却比localStorage以及sessionStorage允许存储的数据量要小

 

最后

  由于上述代码只在IE浏览器下有效,最好使用IE条件注释来避免其他浏览器载入上述代码

<!--[if IE]>

<![endif]-->
posted @ 2017-03-21 18:11  小火柴的蓝色理想  阅读(1826)  评论(1编辑  收藏  举报