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 相关文章推荐
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
js运动事件函数详解
Oct 21 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
smarty实例教程
2006/11/19 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python使用turtle库绘制时钟
2020/03/25 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
怎样比较两个类型为String的字符串
2016/08/17 面试题
如何保障Web服务器安全
2014/05/05 面试题
个人职业生涯规划书1500字
2013/12/31 职场文书
英语导游词
2015/02/13 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB