（忘记是不是两家邮箱都有这个功能）。 
那这个功能是怎么做的呢？

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

  1. session_start()导致history.go(-1)返回时无法保存表单数据的解决方法

    问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...

  2. 04004_使用JavaScript完成注册表单数据校验

    1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...

  3. 在Adobe Reader中保存PDF表单数据的方法

    通常,Adobe Reader 用户填写表单后,是无法保存所填表单的副本的.但是,对于 Reader 8 和更高版本的用户,您可以扩展其权限,使他们可以完成此操作.如果您使用的是 Acrobat Pr ...

  4. ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法，转载备忘)

    有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...

  5. ASP.NET MVC中在Action获取提交的表单数据方法

    有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...

  6. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

  7. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  8. javascript权威指南第14章 表单脚本示例代码

    HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  9. [JavaScript] 实现简单的表单数据校验功能

    实现表单数据校验功能 因为项目用的UI库功能太少,表单不具备校验功能,所以自己写了一个,只有一个文件. 使用 import { required, email, useValidate } from ...

随机推荐

  1. excel 取前几位文字

    1L.2L的分别用mid函数和left函数都没有问题. 问题是,如果用left函数,必须先确认,字符串中汉字必须排在左边第一个,接下来几个也必须是汉字:mid函数则是根据从左边第某个字符开始,一共取几 ...

  2. OpenGL(1)-环境搭建

    写在前面 工作几年,开始沉心做技术,对自己的知识进行梳理. OpenGL是由khronos组织制定并维护的规范,并不是API. OpenGL在3.2之前采用的是立即渲染模式(固定渲染管线),3.2之后 ...

  3. Unity新版本VR以及SteamVR基础

    一.Unity2018新版本VR Unity 简单VRDemo搭建 Unity环境搭建: PlayerSetting设置如下: 启动虚拟现实驱动,sdk选择OpenVR.HTC  Vive只支持Ope ...

  4. OpenGL学习笔记(6) 基础光照的计算方法

    这个笔记只是冯氏光照模型下漫反射光以及镜面光照的计算方式的笔记 基础光照 基础光照分为环境光,漫反射光,镜面光照 环境光 环境光是一个常量,表示在没有光源的情况下物体的光 漫反射光 漫反射光分量的计算 ...

  5. OTRS

    更新OTRS root@localhost密码: sudo -u otrs /opt/otrs/bin/otrs.Console.pl Admin::User::SetPassword root@lo ...

  6. JAVA之运算符优先级

    Java运算符优先级从高到低 运算符 结合性 [ ] . ( ) (方法调用) 从左向右 ! ~ ++ -- +(一元运算) -(一元运算) 从右向左 * / % 从左向右 + - 从左向右 < ...

  7. Redis集群搭建与使用

    前端时间开发中需要用到redis缓存数据,考虑到单台redis的不稳定性,后采用redis集群的方式来实现,由于之前没有接触过,过程中也是踩了不少的坑,拖了三天总算是搞定了,最近公司比较闲,总结了一下 ...

  8. python基础知识-11-函数装饰器

    python其他知识目录 1.装饰器学习前热身准备 1.1装饰器简介 1.2装饰器热身分析 ) def func(): pass v1 = v2 = func #将函数名赋予一个变量,就和变量赋值是同 ...

  9. ifconfig命令详情

    基础命令学习目录首页 原文链接:https://blog.csdn.net/weixin_37886382/article/details/79716879 许多windows非常熟悉ipconfig ...

  10. XSS攻击防御篇

    前言   上篇文章中提到了 XSS 攻击,而且,也从几个方面介绍了 XSS 攻击带来的严重影响.那么,这篇文章中,主要是针对 XSS 攻击做一个基本的防御,看看可以通过几种方式来修复这个特别常见的安全 ...