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实现客户端保存表单数据 这篇文章。
javascript定时保存表单数据的代码的更多相关文章
- session_start()导致history.go(-1)返回时无法保存表单数据的解决方法
问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...
- 04004_使用JavaScript完成注册表单数据校验
1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...
- 在Adobe Reader中保存PDF表单数据的方法
通常,Adobe Reader 用户填写表单后,是无法保存所填表单的副本的.但是,对于 Reader 8 和更高版本的用户,您可以扩展其权限,使他们可以完成此操作.如果您使用的是 Acrobat Pr ...
- ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法，转载备忘)
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
- ASP.NET MVC中在Action获取提交的表单数据方法
有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...
- React事件处理、收集表单数据、高阶函数
3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...
- Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）
文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...
- javascript权威指南第14章 表单脚本示例代码
HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...
- [JavaScript] 实现简单的表单数据校验功能
实现表单数据校验功能 因为项目用的UI库功能太少,表单不具备校验功能,所以自己写了一个,只有一个文件. 使用 import { required, email, useValidate } from ...
随机推荐
- .NET：关于数据模型、领域模型和视图模型的一些思考
背景 数据模型.领域模型和视图模型是“模型”的三种角色,一些架构用一种类型表示这三种角色,如:传统三层架构.也有一些架构用两种类型表示这三种角色,如:结合ORM的领域驱动架构.非常少见的场景是用三种类 ...
- Python的requests、greenlet和gevent模块在windows下安装
一.requests模块在windows下安装 Linux系统下requests的安装方法在http://docs.python-requests.org/en/latest/user/install ...
- cnblogs客户端配置说明
1. 下载地址 http://openlivewriter.org/ 2.安装 安装时设置好blog地址和账户.密码: 到这里基本上就算安装完成了.如果之前的自动配置没有成功,会出现一个界面让你配置b ...
- Catlike学习笔记(1.2)-使用Unity画函数图像
『Catlike系列教程』第二篇来了~今天周六,早上(上午11点)醒来去超市买了一周的零食回来以后就玩了一整天游戏非常有负罪感.现在晚上九点天还亮着感觉像下午7点左右的样子好像还不是很晚...所以就写 ...
- 初试Shell脚本
背景 临上线前测试比较努力,遇到闪退或者其他问题,会把日志包打给我,由于app内存限制,目前每次打包都是1m大小,所以有时查找问题的上下文比较吃力.同时由于日志比较多,根据关键词过滤的需求越来越重要. ...
- 剑指offer试题（PHP篇三）
21.栈的压入.弹出序列 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4 ...
- Dede织梦验证码不显示,织梦后台登陆验证码不显示解决方法
关于"织梦验证码不显示"的解决方法 "织梦验证码无法显示出来"的问题分析? 1.之前显示正常,但是换了服务器后就不能够正常显示:(这种通常是网站程序经过迁移后所 ...
- vue+webpack前端开发项目的安装方法
安装前,需要进行node.npm检测,查看是否已有安装node.npm环境: 操作方法:Windows+R 调出运行框,输入cmd 调出命令框:分别输入node -v 回车(查看node版本) npm ...
- resize2fs命令详解
基础命令学习目录首页 原文链接:http://blog.51cto.com/woyaoxuelinux/1870299 resize2fs:调整ext文件系统的空间大小 搭配逻辑卷lv使用方法: ...
- 插件使用_kindeditor
1.官网 进入官网:http://kindeditor.net/demo.php 插件下载:http://kindeditor.net/down.php 2.使用 (1)文件夹说明 ├── asp a ...