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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Bootstrap插件全集
Jul 18 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
angular异步验证器防抖实例详解
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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP多线程抓取网页实现代码
2010/07/22 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
总结一些js自定义的函数
2006/08/05 Javascript
根据分辩率调用不同的CSS.
2007/01/08 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python+django加载静态网页模板解析
2017/12/12 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python中类与对象之间的关系详解
2020/12/16 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Noon埃及:埃及在线购物
2019/11/26 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
计算机网络毕业生自荐信
2013/10/01 职场文书
责任担保书范文
2014/05/21 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
演讲开场白和结束语
2015/05/29 职场文书
校运会新闻稿
2015/07/17 职场文书
大学生活感想
2015/08/10 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python