跨浏览器的本地存储：userData behavior（转）

现在最流行的本地存储莫过于 cookie 的应用，但浏览器对 cookie 有很多限制，最大的限制在于其对cookie 总大小，仅为 4K 左右（包括名（name）、值（value）和等号）。

对于复杂一点的应用和需求，仅有的 4K 大小还是有点相形见绌，其实很多浏览器（IE、Firefox、Safari）本身也提供了自己的本地存储的功能，或许在特定的环境下能满足我们。

一、userData behavior

浏览器支持：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() —— 设置指定的属性值。

备注：

1、从安全方面考虑，一个 userData 存储区只能用于同一目录和对同一协议进行存储。

2、如果使用 userData behavior 不正确可能会对你的应用造成危害，userData 存储区中的数据没有加密因而不安全的。

任何可以访问 UserData 保存磁盘的应用都可以访问该数据，所以，推荐不要保存敏感的数据，比如信用卡号，详细：《Security Considerations: DHTML and Default Behaviors》

3、userData behavior 会跨 session 存储信息到存储区，这提供了动态的数据结构和比 cookie（一般 4KB）更大的容量。

userData 存储区的容量依赖于 domain 的安全域。

下表显示的是 userData 存储最大容量，对单独文档和整个域名的所有文档都适用，但基于安全域。

Local achine             128      1024
Intranet                  512      10240
Trusted Sites          128      1024
Internet                 128      1024
Restricted              64         640

线上使用时，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB，所以如果考虑到各种情况的话，单个文件最好能控制64KB以下

4、如果设置 userData behavior 到 html、head、title 或者 style 对象上，当 save 和 load 方法被调用时会出错。如果必须设置到 style 中，可以设置内联或者文档头，例如：

5、对于 userData behavior 来说 ID 是可选的，但是如果有，则会改善执行性能。

6、userData 可以将数据以 XML 格式保存在客户端计算机上，一般保存在 C（WIN 系统盘）:\Documents and Settings\XXX\UserData\ 文件夹下。

7、userData 数据一直存在，除非人为删除或者用脚本设置该数据的失效日期（expires）。

如何使用？

用下面的JS语句就可以建立一个支持UserData的对象：

o = document.createElement('input');
o.type = "hidden";
o.addBehavior ("#default#userData");
//UserData.o.style.behavior = "url('#default#userData')" ;
//上面的语句也是一样的作用
document.body.appendChild(o);

说白了UserData就是样式里的一个Behavior，所以这样写也是一样的：

<input type=hidden class= storeuserData />
<style>
.storeuserData {behavior:url(#default#userData);}
</style>

UserData可以绑定在大多数的html标签上

举例：

<HTML>
<HEAD>
<STYLE>
.userData {behavior:url(#default#userdata);}
</STYLE>
<SCRIPT>
function fnSaveInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.setAttribute("sPersist",oPersist.value); //将oPersist.value存储为sPersist属性
oPersist.save("oXMLBranch"); //存储在名为oXMLBranch的UserData存储区
var oPersist2=oPersistForm.oPersistInput2;
oPersist2.setAttribute("sPersist2",oPersist2.value);
oPersist2.save("oXMLBranch2");
}
function fnLoadInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.load("oXMLBranch");
oPersist.value=oPersist.getAttribute("sPersist");
var oPersist2=oPersistForm.oPersistInput2;
oPersist2.load("oXMLBranch2");
oPersist2.value=oPersist2.getAttribute("sPersist2");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="oPersistForm">
<INPUT CLASS="userData" TYPE="text" ID="oPersistInput"><br>
<textarea CLASS="userData" id="oPersistInput2" name="message" rows="15" cols="35" wrap="virtual"></textarea>
<INPUT TYPE="button" VALUE="Load" onclick="fnLoadInput()">
<INPUT TYPE="button" VALUE="Save" onclick="fnSaveInput()">
</FORM>
<select id="select1" class="userData">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<script>
var obj=document.all.select1;
obj.attachEvent('onchange',saveSelectedIndex)
function saveSelectedIndex(){
obj.setAttribute("sSelectValue",obj.selectedIndex);
obj.save("oSltIndex");
}
window.attachEvent('onload',loadSelectedIndex)
function loadSelectedIndex(){
obj.load("oSltIndex");
obj.selectedIndex=obj.getAttribute("sSelectValue");
}
</script>
<input type=checkbox id=chkbox1 class=userData>
<script>
var obj2=document.all.chkbox1;
obj2.attachEvent('onclick',saveChecked)
function saveChecked(){
obj2.setAttribute("bCheckedValue",obj2.checked);
obj2.save("oChkValue");
}
window.attachEvent('onload',loadChecked)
function loadChecked(){
obj2.load("oChkValue");
var chk=(obj2.getAttribute("bCheckedValue")=="true")?true:false;
obj2.checked=chk;
}
</script>
</BODY>
</HTML>

/*
---------------UserData介绍-------------------------------------------------------------------------
UserData是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。
文件会保存在C:\Documents and Settings\Administrator\UserData下，以aa[0].xml aa[1].xml的文件名存在
更多说明见http://hi.baidu.com/kaisep/blog/item/bea532f58eb0082cbc310980.html
UserData对象有以下的属性和方法：
属性描述
expires 设置或读取文件过期时间
XMLDocument 读取文件的XML DOM
方法描述
getAttribute() 读取指定属性的值
load() 打开文件
removeAttribute() 删除指定的属性
save() 保存文件
setAttribute() 为指定属性赋值
---------------------------load()方法介绍-------------------------------------------------------------------------
load 版本：DHTML Object Model　返回值：无
语法：Scripting Object .load ( sStoreName )
参数：sStoreName : 必选项。字符串(String)。指向 userData 存储区内的持续性对象的名称。
返回值：无
说明：从 userData 存储区内载入指定的存储对象。
通过指定的在网站根目录和当前目录之间的目录树内的路径，您可以确定到 userData 存储区的访问入口。例如，假如你保存 userData 存储区在 /private/ 目录，则在 /public/ 目录之下的网页不能访问 userData 存储区。
如
o.setAttribute("code", "hello world!");
o.save("baidu");

执行后，UserData文件夹中会生成一个baidu[1].xml文件，其中的内容是：
<ROOTSTUB code="hello,world!"/>
--------------------------------使用介绍------------------------------------------------
01:一定要在页面上加上如下css定义：
<STYLE>
.userData{behavior:url(#default#userData);
}
</STYLE>
02:引入JS:<SCRIPT language=javaScript src="userData.js"></SCRIPT>
----------------------------------------------------------------------------------------
*/

posted on 2012-03-15 21:27 笨笨丁阅读(798) 评论(0) 编辑收藏举报

刷新页面返回顶部

善待自己,珍惜今天,恩泽他人,享受生活

如何使用？