js下利用userData实现客户端保存表单数据_javascript技巧

事实上，我们可以利用微软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部分宣告如下样式：



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

2、语法：
HTML
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）

代码如下：

<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> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

示例二：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 全选 注:如需引入外部Js需刷新才能执行]

示例三：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 全选 注:如需引入外部Js需刷新才能执行]