javascript定时保存表单数据的代码_Javascript教程-查字典教程网
javascript定时保存表单数据的代码
javascript定时保存表单数据的代码
发布时间:2016-12-30 来源:查字典编辑
摘要:(忘记是不是两家邮箱都有这个功能)。那这个功能是怎么做的呢?定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个...

(忘记是不是两家邮箱都有这个功能)。

那这个功能是怎么做的呢?

定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。

而此时,就该轮到我们很少关注,而且估计有不少人不知道的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"></span>

<p />

<textarea height="500" id="txt1">

</textarea>

<p />

<input type="button" id="btn1" value="停止保存" />

<input type="button" id="btn2" value="获取保存的值" />

</body>

</html>

将这段html复制下来运行一下,你就会发现,其实这跟邮箱中的定时保存基本一致了,在润色一下就OK了。

大家看下利用userData实现客户端保存表单数据 这篇文章。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类