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

小咪咪 2021-11-11 23:10 186阅读 0赞

对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用Cookie技术来实现，这些功能例如：下拉列表框选择的选项，文本框输入的数据等。事实上，我们可以利用微软DHTML默认行为中的userData行为来实现这个功能。  
  
  
因为很多网友问到这样的问题，整理了一下，并提供了三个示例。下面将就该行为的使用做一个介绍：  
  
  
**UserData 行为（userData Behavior）：**  
  
  
1、说明：  
  
userData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\\Documents and Settings\\Liming\\UserData\\文件夹下（如果操作系统不是安装在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][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" οnclick="fnLoadInput()"> <INPUT TYPE="button" VALUE="Save" οnclick="fnSaveInput()"> </FORM> </BODY> </HTML>  
\[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码\]  
  
**示例二：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>  
\[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码\]  
  
**示例三：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>  
\[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码\]  
转自: [http://www.g22.net/Article/Show.asp?ID=667][http_www.g22.net_Article_Show.asp_ID_667]

转载于:https://www.cnblogs.com/Dicky/archive/2005/04/01/130543.html

[http_msdn.microsoft.com]: http://msdn.microsoft.com/
[http_www.g22.net_Article_Show.asp_ID_667]: http://www.g22.net/Article/Show.asp?ID=667