利用userData实现客户端浏览器保存表单数据

阅览次数:
文章来源: CodePub整理
原文作者:
整理日期: 2008-09-25
发表评论

字体大小:
小
中
大

对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用Cookie技术来实现，这些功能例如：下拉列表框选择的选项，文本框输入的数据等。事实上，我们可以利用微软DHTML默认行为中的userData行为来实现这个功能。

因为很多网友问到这样的问题，整理了一下，并提供了三个示例。下面将就该行为的使用做一个介绍：

UserData 行为（userData Behavior）：

1、说明：

userData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:Documents and SettingsLimingUserData文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。

该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。

userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。

出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.

在HTML、HEAD、TITLE和STYLE标记上应用了userData行为后使用save和load方法将会出错。
Setting the userData behavior (proposed) class on the HTML, HEAD, TITLE, or STYLE object causes an error when the save or load method is called.

必须在行内或者文档的HEAD部分宣告如下样式：

<STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>

userData行为可用于Microsoft? Win32?和Unix平台上的IE 5.0以上版本，不支持Netscape。

2、语法：

HTML    <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Script    object.style.behavior = "url('#default#userData')"

         object.addBehavior ("#default#userData")

注：sID参数是一个可以描述该标记的唯一id。ID是可选的，但如果有，可以在脚本中方便地对该标记加以控制。

3、成员：

expires

  设置或取得使用userData行为保存数据的失效日期。

脚本语法：对象ID.expires = 参数

参数是一个使用UTC（Universal Time Coordinate，世界调整时间）格式表示失效日期的字符串。该属性可以读写，没有默认值。浏览器会对比这个日期和当前日期，如果到期，该数据就自动失效。

getAttribute()

  取得指定的属性值。

load(存储区名)

  从UserData存储区载入存储的对象数据。

removeAttribute()

  从对象中删除指定的属性值。

save(存储区名)

  将对象数据存入一个UserData存储区。

setAttribute()

  设置指定的属性值。

XMLDocument

  取得存储该对象数据的XML DOM引用。

具体用法可以查看MSDN（http://msdn.microsoft.com）

4、示例

示例一：文本框标记的应用（Microsoft）

代码:

<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存储区

}

function  fnLoadInput(){

   var oPersist=oPersistForm.oPersistInput;

    oPersist.load("oXMLBranch");  //载入在名为oXMLBranch的UserData存储区

    oPersist.value=oPersist.getAttribute("sPersist");  //将sPersist属性赋值给oPersist.value

}

</SCRIPT>

</HEAD>

<BODY>

<FORM  ID="oPersistForm">

<INPUT CLASS="userData" TYPE="text"  ID="oPersistInput">

<INPUT TYPE="button" VALUE="Load"  onclick="fnLoadInput()">

<INPUT TYPE="button" VALUE="Save"  onclick="fnSaveInput()">

</FORM>

</BODY>

</HTML>

示例二：Checkbox标记的应用

代码:

<style>

      .userData  {behavior:url(#default#userdata);}

</style>

<input type=checkbox  id=chkbox1 class=userData>

<script>

var  obj=document.all.chkbox1;

obj.attachEvent('onclick',saveChecked)

function  saveChecked(){

obj.setAttribute("bCheckedValue",obj.checked);

obj.save("oChkValue");

}

window.attachEvent('onload',loadChecked)

function  loadChecked(){

obj.load("oChkValue");

var  chk=(obj.getAttribute("bCheckedValue")=="true")?true:false;

obj.checked=chk;

}

</script>

示例三：Select标记的应用

代码:

<style>

      .userData  {behavior:url(#default#userdata);}

</style>

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

上一篇:用CSS完成表单历史保留功能
下一篇:兼容firefox的js实现字体渐渐消失

推荐文章

热点文章

相关文章

百度搜索

利用userData实现客户端浏览器保存表单数据

代码:

代码:

代码:

网友评论: