码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-02-02 14:38:03      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:date()   obj   停止   ntb   inner   art   htm   tin   key   

(忘记是不是两家邮箱都有这个功能)。 
那这个功能是怎么做的呢? 

定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。 
而此时,就该轮到我们很少关注,而且估计有不少人不知道的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定时保存表单数据的代码

标签:date()   obj   停止   ntb   inner   art   htm   tin   key   

原文地址:https://www.cnblogs.com/jijm123/p/10348318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!