zoukankan      html  css  js  c++  java
  • 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;500px;" id="txt1"> 
    </textarea> 
    <p /> 
    <input type="button" id="btn1" value="停止保存" /> 
    <input type="button" id="btn2" value="获取保存的值" /> 
    </body> 
    </html> 

    将这段html复制下来运行一下,你就会发现,其实这跟邮箱中的定时保存基本一致了,在润色一下就OK了。
    大家看下利用userData实现客户端保存表单数据 这篇文章。

  • 相关阅读:
    Linux命令echo -e
    Linux下监控磁盘使用量并在超过阀值后自动发送报警邮件
    NSQ部署
    linux下查看和添加PATH环境变量
    NSQ:分布式的实时消息平台
    shell执行mysql操作
    scrapy爬虫成长日记之将抓取内容写入mysql数据库
    微信自定义菜单说php json_encode不转义中文汉字的方法
    CentOS 6 RPM安裝python 2.7
    MyCAT安装指南
  • 原文地址:https://www.cnblogs.com/jijm123/p/10348318.html
Copyright © 2011-2022 走看看