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

时间: 02-02

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

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()

jQuery的下面是动态表格动态表单中的HTML代码

动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script><script language="javascript">$("#addjobline").css("cursor","pointer");$(

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

Struts2表单数据接收方式

1.将Action类作为一个POJO,直接进行接收 在Action类内部定义字段名称,并为之声明get/set方法.页面表单name属性与定义字段名称相同. package com.common.login; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class LoginAction extends ActionSupport{ private String n

jsp提交表单数据乱码,内置对象,以及过滤器

jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getParameter()之前,设置请求对象request的编码方式. <% request.setCharacterEncoding("utf-8");%> 002.如果是通过get方式提交的form,两种处理乱码方案: 01.通过new String(str.getBytes(“iso

ThinkPHP完成对数据的添加以及表单数据的收集

数据添加分两种方式,一种是数组的方式,另一种是使用AR的方式添加,其实这两种方式添加的方式是相同的,就是一个规范的不同而已,所谓AR,就是: //一个数据模型代表一张表. //一个对象代表一条数据. //一个字段代表一个对象的属性 这样也符合传统的思维习惯,下面是数据模拟添加的实例代码: $temp=D('User'); // $arr=array('id'=>11,'name'=>'add_1_xuning','password'=>md5('123456')); //下面是通过AR的

strus2中获取表单数据 两种方式 属性驱动 和模型驱动

strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值* 如果一个属性在对象栈,在页面上可以根据name属性进行回显*/ /** * 属性驱动实现的条件:* 1.当前请求的action在栈顶,所以action中的属性就暴漏出来了* 2.获取页面上表单的元素,整合成一个map * 3.调用setValue方法赋值*/ 1 package cn.itcast.struts2.sh; 2 3

jq真正清空表单数据(亲测 好用)

工作中遇到复杂的表单,需要一次清空挺麻烦的,字段太多,不仅包含input,还有select,radio,checkbox 于是乎,想一次清空也挺麻烦的,所以整理代码如下,供大家参考学习(本人也是菜鸟一枚,正在努力学习中......) 直接上jq代码: $(":input","#myForm") .not(":button",":reset","hidden","submit") .val