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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 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
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php判断是否为json格式的方法
2014/03/04 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
浅谈React碰到v-if
2018/11/04 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python 元类实例解析
2018/04/04 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python实现石头剪刀布程序
2021/01/20 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python中拆分字符串的操作方法
2019/07/23 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
AUC计算方法与Python实现代码
2020/02/28 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
监理资料员岗位职责
2014/01/03 职场文书
司马光教学反思
2014/02/01 职场文书
客服部班长工作责任制
2014/02/25 职场文书
工商干部先进事迹
2014/05/14 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
解决 redis 无法远程连接
2022/05/15 Redis
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS