javascript定时保存表单数据的代码
2024-08-25 02:23:38
(忘记是不是两家邮箱都有这个功能)。
那这个功能是怎么做的呢?
定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。
而此时,就该轮到我们很少关注,而且估计有不少人不知道的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实现客户端保存表单数据 这篇文章。
最新文章
- Linux学习日记之磁盘与档案系统
- iOS runtime实用篇解决常见Crash
- Cross-Origin Resource Sharing协议介绍
- php 获取代码执行时间和消耗的内存
- 创建服务factory和service方法的区别
- ZOJ3228 Searching the String(AC自动机)
- (转)TCP、UDP、IP协议
- ArcGis Javascript API (V3.6)加载天地图
- 素数个数统计——Eratosthenes筛法 [LeetCode 204]
- 【学习总结】声明变量在@interface括号中与使用@property的区别
- creating indexing for SQL tunning
- 重启adb服务
- LINUX 笔记-ln 命令
- 简单的cookie读写封装
- 戴尔poweredge r730服务器配置及系统安装详解教程
- vue 中下拉select怎样给后台传递用户选择的物品id
- Android 开源库获取途径整理
- C++STL学习笔记_(2)deque双端数组知识
- MacBook设置终端颜色,补全忽略大小写,设置命令别名alias,设置vim,设置显示git分支
- Mycat从入门到放弃