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

js下利用userData实现客户端保存表单数据的更多相关文章

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

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

  2. 利用BeanUtils工具类封装表单数据

    一.BeanUtils工具类的使用 1.首先导入BeanUtils工具类的jar包 commons-beanutils-1.8.0.jar commons-logging-1.1.1.jar 2.se ...

  3. 【ASP.NET Web API教程】5.2 发送HTML表单数据：URL编码的表单数据

    原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

  4. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  5. 如何使用PHP验证客户端提交的表单数据

    PHP 表单验证 本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证 在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...

  6. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  7. web自己主动保存表单

    note:当中部分源代码来源网络 所用的框架:jquery 实现的功能: 1.自己主动保存表单 2.页面刷新的时候把自己主动保存的值赋值给表单元素 思路: 1.表单值改变的时候自己主动触发函数.保存表 ...

  8. PHP利用超级全局变量$_POST来接收表单数据。

    利用$_POST超级全局变量接收表单的数据,然后利用echo输出到页面. 下面是代码: <!doctype html> <html> <head> <titl ...

  9. C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)

    其原理是,利用winfrom模拟表单提交数据.将要提交的參数提交给网页,网页运行代码.得到数据.然后Winform程序将网页的全部源码读取下来.这样就达到windows应用程序和web应用程序之间传參 ...

随机推荐

  1. IntelliJ IDEA lombok插件的安装和使用

    IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多.lombok是开源的代码生成库,是一款非常实用的小工具,我们在编辑实体类时可以通过lombok注解减少getter.se ...

  2. 安装Genymotion模拟器（第三方）

    优势: 启动速度更快 注册账户,下载可用的系统镜像,就可以使用.     官方网站: https://www.genymotion.com/account/login/ 选择的版本是带VirtualB ...

  3. Robot Framework--用例、数据、流程分离例子

    如果想改变输入框的输入词,则需要不停的复制case,为了减少冗余,可以做一个简单的分层,把搜索流程剥离成一个关键字,然后再不同的case中调用这个关键字,然后传递不同的参数,以进行不同数据在同一流程下 ...

  4. php数据类型之​浮点型

    所谓浮点类型,可以理解为:我们数学里面的小数. [注意]关于精度.取值范围和科学型声明不是学习的重点.因为此块在实际开发中用的特别少.我们将此块的知识点的学习标注为,了解级别.直线电机滑台 声明方式分 ...

  5. 35 | join语句怎么优化？

    在上一篇文章中,我和你介绍了 join 语句的两种算法,分别是 Index Nested-Loop Join(NLJ) 和 Block Nested-Loop Join(BNL). 我们发现在使用 N ...

  6. 24 | MySQL是怎么保证主备一致的？

    在前面的文章中,我不止一次地和你提到了binlog,大家知道binlog可以用来归档,也可以用来做主备同步,但它的内容是什么样的呢?为什么备库执行了binlog就可以跟主库保持一致了呢?今天我就正式地 ...

  7. qt5.10 开发安卓之硌手的小虫子们

    1.jdk 下载: 下载地址:http://www.oracle.com/technetwork/java/javase/overview/index.html windows 平台不要下载java ...

  8. 将List<E>内对象按照某个字段排序

    主要用到java.util的Collections类 Collections.sort(list); 其中,E必须实现Comparable<E>接口

  9. As I Began to Love Myself

    As I Began to Love Myself: Charlie Chaplin on his 70th birthday As I began to love myself I found th ...

  10. Unrecognized syntax identifier "proto3". This parser only recognizes "proto2". ”问题解决方法

    编译cartographer时遇到Unrecognized syntax identifier “proto3”. This parser only recognizes “proto2”.排查:使用 ...