zoukankan      html  css  js  c++  java
  • JS定时保存表单数据

    我相信有不少TX用过QQ或163的邮箱吧?
    他们中有一个比较有用且有趣的功能,如果您在编写邮件,那在固定一个时间频率内,它会自动将您的邮件内容保存起来,以免丢失。
    (忘记是不是两家邮箱都有这个功能)。
    那这个功能是怎么做的呢?

    定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。
    而此时,就该轮到我们很少关注,而且估计有不少人不知道的UserData 行为(userData Behavior)登场了:
    而这个UserData是什么?怎么用?,我将在文章最后转载一篇介绍它的文章。
    现在,我直接上例子,所谓无代码,无真相嘛:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <script type="text/javascript">
    
    	window.onload=function(){
    
    		var txtObj = document.getElementById('txt1');
    		var spanObj = document.getElementById('s1');
    
    		//自动保存
    		txtObj.addBehavior("#default#userData");
    
    		var saveTimer= setInterval(function(){
    			txtObj.setAttribute('OValue',txtObj.value);
    			txtObj.save('SavedData');
    
    			spanObj.innerText='数据保存于:'+(new Date());
    			setTimeout(function(){
    				spanObj.innerText='';
    			},1000);
    
    		},10000); //每分钟保存一次
    
    		document.getElementById('btn1').attachEvent('onclick',function(){
    			clearInterval(saveTimer); //取消保存
    			txtObj.removeAttribute('OValue');
    		});
    
    		document.getElementById('btn2').attachEvent('onclick',function(){
    			txtObj.load('SavedData');
    			alert(txtObj.getAttribute('OValue'));
    			//txtObj.value = txtObj.getAttribute('OValue');
    		});
    	};
    
      </script>
     </head>
    
     <body>   
         <span id="s1" style="color:red;"></span>
    	 <p />
         <textarea height="500" style="height:500px;500px;" id="txt1">
    	 </textarea>
    	 <p />
    	 <input type="button" id="btn1" value="停止保存" />
    	 <input type="button" id="btn2" value="获取保存的值" />
     </body>
    </html>
    

    将这段html复制下来运行一下,你就会发现,其实这跟邮箱中的定时保存基本一致了,在润色一下就OK了。

    ----------------------------

    下面是一篇描述、讲解UserData的文章,来自于:http://www.cnblogs.com/isoar/archive/2010/06/18/1759859.html?login=1#commentform

    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

    <h3>
       心静似高山流水不动,心清若巫峰雾气不沾。
    </h3>
  • 相关阅读:
    iOS学习笔记21-NSUrlSession与NSUrlConnection
    iOS项目日志1-联系人列表
    iOS学习笔记20-网络
    iOS学习笔记21-popover的使用
    vue-cli+webpack简单使用
    Vue2.0+webpack npm run dev报错
    RideGirl被拒原因
    NSUserDefaults 保存颜色
    UIMenuController
    Xcode报错解决方案
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1985925.html
Copyright © 2011-2022 走看看