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 相关文章推荐
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js如何取消事件冒泡
Sep 23 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
json的使用小结
Jun 08 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 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中函数内引用全局变量的方法
2008/10/20 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python批量赋值操作实例
2018/10/22 Python
python字符串查找函数的用法详解
2019/07/08 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
医学生求职自荐信
2013/10/25 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
教师个人剖析材料
2014/02/05 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
小马王观后感
2015/06/11 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
详解nginx location指令
2022/01/18 Servers
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript