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 1.4 中的Ajax问题
Jan 23 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
JavaScript中的类继承
2010/11/25 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python代码制作configure文件示例
2014/07/28 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python函数和模块的使用总结
2019/05/20 Python
python实现连连看游戏
2020/02/14 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
会计系中文个人求职信
2013/12/24 职场文书
大学军训感言800字
2014/02/27 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
配置nginx 重定向到系统维护页面
2021/06/08 Servers
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js