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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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循环获取GET和POST值的代码
2008/04/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php合并js请求的例子
2013/11/01 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现2048小游戏
2015/03/30 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
分享python数据统计的一些小技巧
2016/07/21 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
自我评价格式
2014/01/06 职场文书
养牛场项目建议书
2014/05/13 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技