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 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
javascript实现Table排序的方法
May 15 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
js断点调试经验分享
Dec 08 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 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
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JavaScript运算符小结
2015/06/03 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python正则表达式如何匹配中文
2020/05/27 Python
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
致裁判员加油稿
2014/02/08 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2016公司新年问候语
2015/11/11 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
golang实现浏览器导出excel文件功能
2022/03/25 Golang