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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
jQuery DIV弹出效果实现代码
Jul 03 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
javaScript Array api梳理
Mar 31 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
初学CAKEPHP 基础教程
2009/11/02 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
php常用数组函数实例小结
2016/12/29 PHP
jquery获取复选框被选中的值
2014/03/22 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python代码区分大小写吗
2020/06/17 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
为什么要有struct关键字
2012/05/08 面试题
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
煤矿安全协议书
2014/08/20 职场文书
十八大宣传标语
2014/10/09 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
平遥古城导游词
2015/02/03 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
开学第一天的感想
2015/08/10 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python