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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
深入探究node之Transform
Jul 20 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
ES6 解构赋值的原理及运用
May 25 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操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
javascript控制图片播放的实现代码
2020/07/29 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
大学毕业通用个人的求职信
2013/12/08 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
办公室助理岗位职责
2013/12/25 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
2014年创卫工作总结
2014/11/24 职场文书
慈善募捐倡议书
2015/04/27 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS