作家
登录

javascript定时保存表单数据的代码

作者: 来源:www.28hudong.com 2013-03-30 00:57:37 阅读 我要评论

(忘记是不是两家邮箱都有这个功能)。 那这个功能是怎么做的呢? 定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。 而此时,就该轮到我们很少关注,而且估计有不少人不知道的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实现客户端保存表单数据 这篇文章。

  推荐阅读

  初识JQuery 实例一(first)

完整代码:复制代码 代码如下:<!DOCTYPE html> <html> <head> <style type="text/css"> .highlight { background-color: yellow; } .gray { background-color: Gray; } </style> <script src="http://code.jquery.c>>>详细阅读


本文标题:javascript定时保存表单数据的代码

地址:http://www.17bianji.com/kaifa2/JS/24807.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)