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]-->

更多专业前端知识，请上【猿2048】www.mk2048.com