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实现客户端保存表单数据 这篇文章。

  • 相关阅读:
    使用Jackson对字典翻译
    通过代理的方式实现对httpClient的监控,超时回调
    mapstruct 1.4.2和lombok 1.18.16之后版本,报错和mapstruct生成空的实现
    jenkins + sonar 中文文件名报错解决
    linux 启动jar脚本
    easyUI关键(常见)组件详解
    shiro三连斩之概念
    SpringMVC请求参数总结
    springboot jsp,过滤器,拦截器
    CentOS添加使用
  • 原文地址:https://www.cnblogs.com/jijm123/p/10348318.html
Copyright © 2011-2022 走看看