JS定时保存表单数据 -

oywl2008

浏览: 1051751 次
性别:
来自: 广州

最近访客更多访客>>

panghu

wangyy

qjl26

chyanog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS定时保存表单数据

博客分类：

Html & Javasctipt

我相信有不少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;width: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>

link: http://www.cnblogs.com/McJeremy/archive/2011/03/16/1985925.html

分享到：

图片(旋转/缩放/翻转)变换效果(ccs3/滤 ... | Html5 demo site

2012-03-12 11:16
浏览 1211
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS定时保存表单数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS定时保存表单数据

评论

发表评论

相关推荐

ECMAScript 6 Babel

Javascript模块化编程（一）：模块的写法

CommonJS Modules/1.0 规范

测试框架 Mocha 实例教程

Node.js Tutorial for Beginners

The MVC and MVVM Patterns

10 Reasons Why You Should Use AngularJS

Angularjs JS Parse JSON

JavaScript == === 区别

angularjs

AngularJS 视频教程

Bootstrap Get Started 前台框架 可以适应多种平台

零基础学HTML 5实战开发(第一季)

show or hidden DIV

总结：JSP页面img图片缓存问题现象表述及问题解决

JS print

javascript create html table

jQuery Validation Plugin

For 语训中心

IE input file fakepath solution

最近访客更多访客>>

Bootstrap Get Started 前台框架可以适应多种平台