`
toyota2006
  • 浏览: 555869 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

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

数据结构IEMicrosoft脚本ASP.net 
阅读更多

bencalie已经把userData的基本应用整理很好了，偶只好施行拿来主义吧！

引用
作者：bencalie


对于多数网页制作的朋友，实现在客户端保存在网页表单上的信息，比较多的是采用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）


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>


示例四：偶综合起来做的例子 

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


参考：http://www.relaxlife.net/2005/relaxlife/blogview.asp?logID=220
分享到：
| 讨论：草稿自动保存问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在Web开发中，客户端保存表单数据是一个常见的需求。一般来说，Cookie是最常用来实现这一功能的技术。Cookie具有一定的局限性，比如容量小、需要手动发送给服务器等。而微软的DHTML技术提供了一种替代方案，即...

    js操作session例子

    服务器端接收到表单数据后，将其保存到Session中。 下面是一个简单的示例： 1. 创建HTML部分： ```html ;"&gt; &lt;input type="hidden" name="sessionKey" value="userData"&gt; 保存数据到Session ``` 2. 使用...

    前端项目-egjs-persist.zip

    egjs-persist通过跟踪和恢复这些历史导航状态，确保在用户回退或前进时，之前的状态（例如表单数据、滚动位置等）能被正确恢复。 4. **兼容性考虑**：由于egjs-persist依赖于HTML5的Local Storage和Session Storage...

    LocalStorage

    3. **表单数据**：在用户填写表单时，若页面刷新或意外关闭，可以使用LocalStorage临时保存用户输入，避免数据丢失。 4. **游戏进度**：对于一些简单的网页游戏，可以利用LocalStorage存储游戏进度，让用户能继续...

Magicbox
Global site tag (gtag.js) - Google Analytics