JS定时保存表单数据

我相信有不少TX用过QQ或163的邮箱吧？
他们中有一个比较有用且有趣的功能，如果您在编写邮件，那在固定一个时间频率内，它会自动将您的邮件内容保存起来，以免丢失。
（忘记是不是两家邮箱都有这个功能）。
那这个功能是怎么做的呢？

定时，我们知道怎么弄，但保存呢？也许我们会通过隐藏域等手段来存放数据。但是，这个却有个缺点：那就是刷新页面后，数据将会丢失。
而此时，就该轮到我们很少关注，而且估计有不少人不知道的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的文章，来自于：http://www.cnblogs.com/isoar/archive/2010/06/18/1759859.html?login=1#commentform

UserData 行为（userData Behavior）：


1、说明：

userData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。


该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。


userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。

userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。

出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.


在HTML、HEAD、TITLE和STYLE标记上应用了userData行为后使用save和load方法将会出错。
Setting the userData behavior (proposed) class on the HTML, HEAD, TITLE, or STYLE object causes an error when the save or load method is called.


必须在行内或者文档的HEAD部分宣告如下样式：


   <STYLE>
      .userData {behavior:url(#default#userdata);}
   </STYLE>


userData行为可用于Microsoft? Win32?和Unix平台上的IE 5.0以上版本，不支持Netscape。


2、语法：

HTML     <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Script     object.style.behavior = "url('#default#userData')"

             object.addBehavior ("#default#userData")

注：sID参数是一个可以描述该标记的唯一id。ID是可选的，但如果有，可以在脚本中方便地对该标记加以控制。


3、成员：


expires

  设置或取得使用userData行为保存数据的失效日期。

    脚本语法：对象ID.expires = 参数

    参数是一个使用UTC（Universal Time Coordinate，世界调整时间）格式表示失效日期的字符串。该属性可以读写，没有默认值。浏览器会对比这个日期和当前日期，如果到期，该数据就自动失效。


getAttribute()
  取得指定的属性值。


load(存储区名)
  从UserData存储区载入存储的对象数据。


removeAttribute()
  从对象中删除指定的属性值。


save(存储区名)
  将对象数据存入一个UserData存储区。


setAttribute()
  设置指定的属性值。


XMLDocument
  取得存储该对象数据的XML DOM引用。


具体用法可以查看MSDN（http://msdn.microsoft.com）

posted @   mcjeremy  阅读(8988)  评论(4)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
历史上的今天：
2010-03-16 .NET对象序列化的几种方式
------------------------------------ 心静似高山流水不动，心清若巫峰雾气不沾 ------------------------------------
点击右上角即可分享
微信分享提示
AI IDE Trae