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 保存数组到Cookie的代码
Apr 14 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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的面向对象编程
2006/10/09 PHP
php mysql索引问题
2008/06/07 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php中curl使用指南
2015/02/05 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python argv用法详解
2016/01/08 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python reverse反转部分数组的实例
2018/12/13 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
早读迟到检讨书
2014/01/24 职场文书
花店创业计划书范文
2014/02/07 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
我的祖国演讲稿
2014/05/04 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python