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修改css样式style
Apr 15 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
原生js二级联动效果
Jun 20 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 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/04 日漫
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP的引用详解
2015/02/22 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
中学自我评价
2014/01/31 职场文书
带薪年假请假条
2014/02/04 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
小学教师求职信范文
2015/03/20 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python