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


    对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用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> 
  • 相关阅读:
    CefSharp High DPI问题的解决
    Navicat连接Oracle数据库报错ORA-28547解决方法
    postman模拟HttpPost请求的方法
    百度地图、高德地图、Google地图等坐标提取与转换
    ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
    简单实现ASP.Net MVC网页播放音乐
    百度地图api 区级以下行政区划
    解决asp.net MVC中 当前上下文中不存在名称“model” 的问题
    【转】如何解决plsql查询oracle数据库语句where条件带有中文无法匹配结果
    Oracle的order by的中文排序问题
  • 原文地址:https://www.cnblogs.com/jijm123/p/11427547.html
Copyright © 2020-2023  润新知