javascript定时保存表单数据的代码


Posted in Javascript onMarch 17, 2011

(忘记是不是两家邮箱都有这个功能)。
那这个功能是怎么做的呢?

定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。
而此时,就该轮到我们很少关注,而且估计有不少人不知道的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实现客户端保存表单数据 这篇文章。
Javascript 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
js键盘事件的keyCode
Jul 29 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
eval与window.eval的差别分析
Mar 17 #Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 #Javascript
jquery.validate分组验证代码
Mar 17 #Javascript
jquery中ajax调用json数据的使用说明
Mar 17 #Javascript
jQuery版Tab标签切换
Mar 16 #Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 #Javascript
jquery radio 操作代码
Mar 16 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php数组指针操作详解
2017/02/14 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Javascript 对象的解释
2008/11/24 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
实习护理工作自我评价
2013/09/25 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
反邪教观后感
2015/06/11 职场文书
校运会通讯稿
2015/07/18 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers