用js保存html表单,javascript定时保存表单数据的代码

本文介绍了如何利用HTML5的UserData行为实现在网页表单中自动保存数据,包括定时保存和加载机制,类似于邮箱的定时功能。通过实例演示,展示了如何使用JavaScript和userData来持久化用户输入,即使刷新页面也能保持数据。

(忘记是不是两家邮箱都有这个功能)。

那这个功能是怎么做的呢?

定时,我们知道怎么弄,但保存呢?也许我们会通过隐藏域等手段来存放数据。但是,这个却有个缺点:那就是刷新页面后,数据将会丢失。

而此时,就该轮到我们很少关注,而且估计有不少人不知道的UserData 行为(userData Behavior)登场了:

而这个UserData是什么?怎么用?,我将在文章最后转载一篇介绍它的文章。

现在,我直接上例子,所谓无代码,无真相嘛:

new document

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');

});

};

将这段html复制下来运行一下,你就会发现,其实这跟邮箱中的定时保存基本一致了,在润色一下就OK了。

大家看下利用userData实现客户端保存表单数据 这篇文章。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值