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

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

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

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

时间: 2024-10-12 09:24:04

javascript定时保存表单数据的代码的相关文章

每天一个JavaScript实例-检测表单数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role="alert"]{ background-color: #f

javascript 封装表单数据的函数

调用例子 1 // 封装RegFee json对象 2 var regFee = new Map(); 3 // 获取表单控件数据 4 var regPayForm = $('#regPayForm').serializeArray(); 5 $.each(regPayForm, function() { 6 regFee.put(this.name, this.value); 7 }); 8 // 总费用 9 var regFeeFee = $("#regFeeFee").text(

easyui提交表单数据的时候如何防止二次提交

在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决方案有很多种,有的在前端解决,有的方案在后端解决,个人觉得能够在前段解决的最好在前段就解决,而且拿java来说,如果在后端解决,在高并发的情况下还要考虑线程安全的问题.最近接触的项目的前端是easyui,在此把解决方案做下记录. 不论是easyui还是别的框架,总体的一个思路是:当我们点击保存按钮之

利用localStorage实现对ueditor编辑内容定时保存为草稿

直接看代码吧 1.引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709 2.ueditor.jsp <head> <!-- 引入jquery --> <script type="text/javascript" src="js/jQuery2.0.js"></script> <!-- 引入

easyui怎么将前台表单数据传递给后台?

前几天一直在研究easyui,当把前台表单数据传递给后台时,出现了很多问题,研究了好长时间原来可以使用jquery ajax中的serialize()序列化将前台表单数据传递给后台,下面是 jQuery 代码: $("#results").append( "<tt>" + $("form").serialize() + "</tt>" ); 项目代码如下: 1 //添加事件 2 $(function()

JavaScript笔记:表单脚本

JavaScript最初的应用之一,就是分担服务器处理表单的责任,打破处处依赖服务器的局面. 1.表单的基础知识 在javascript中,表单是用HTMLFormElement类型来表示的.HTMLFormElement继承了HTMLElement,因而与其他HTML元素有相同的默认属性,不过HTMLFormElement也有它自己独有的属性和方法: acceptCharset:服务器能够处理的字符集 action:接受请求的URL elements:表单中所有控件的集合 enctype:请求

web自动保存表单

note:其中部分源码来源网络 所用的框架:jquery 实现的功能: 1.自动保存表单 2.页面刷新的时候把自动保存的值赋值给表单元素 思路: 1.表单值改变的时候自动触发函数,保存表单(序列化) 2.页面刷新的时候获取保存的值 代码: <script language="javascript" type="text/javascript"> getText(); $(function () { //给class='.tabls绑定 input pro

JavaScript可否多线程? 深入理解JavaScript定时机制

http://www.phpv.net/html/1700.html JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是Java

JavaScript定时机制setTimeout与setInterval研究

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout(function() { alert('你好!'); }, 0); setInterval(callbackFunction, 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被