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 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 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 auth_http类库进行身份效验
2009/03/19 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python合并字符串的3种方法
2015/05/21 Python
对pandas中to_dict的用法详解
2018/06/05 Python
目前最全的python的就业方向
2018/06/05 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python读取Excel表格文件的方法
2019/09/02 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
电气工程师岗位职责
2014/01/01 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
校园绿化美化方案
2014/06/08 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书