js+cookies实现自动保存草稿功能代码,Asp.Net代码库,德仔网

代码语言

代码分类

【Asp.Net】 js+cookies实现自动保存草稿功能

作者:x123jing / 发布于2014/2/24/ 505

这个功能很常见。是为了防止浏览器崩溃或提交不成功而导致自己辛辛苦苦写就的东西消失掉

--现在提供一个js，js是网上下载的，它的原理是将该文本框的东西存储进一个 Cookie. 如果没提交成功（原因可能是浏览器崩溃），下次访问该页面时询问是否导入上次存储的东西。

function AutoSave(it) {

 var _value = it.value; 
 if (!_value) {
  var _LastContent = GetCookie('AutoSaveContent');
  
  if (!_LastContent) return;
  
  if (confirm("Load Last AutoSave Content?")) {
   it.value = _LastContent;
   return true;
  }   
 } else {
  
  var expDays = 30;
  var exp = new Date();
  exp.setTime( exp.getTime() + (expDays * 86400000) ); // 24*60*60*1000 = 86400000
  var expires='; expires=' + exp.toGMTString();

  // SetCookie
  document.cookie = "AutoSaveContent=" + escape (_value) + expires;
 }
}

function getCookieVal (offset) {
 var endstr=document.cookie.indexOf (";",offset);
 if (endstr==-1) endstr=document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name){
 var arg=name+"=";
 var alen=arg.length;
 var clen=document.cookie.length;
 var i = 0;
 while (i<clen){
  var j=i+alen;
  if (document.cookie.substring(i,j)==arg) return getCookieVal (j);
  i = document.cookie.indexOf(" ",i)+1;
  if (i==0) break;
 }
 return null;
}
function DeleteCookie (name) {
 var exp=new Date();
 exp.setTime (exp.getTime()-1);
 var cval=GetCookie (name);
 document.cookie=name+"="+cval+";expires="+exp.toGMTString();
}
 

在html中添加事件：

<!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>Js自动保存</title>
  <script src="AutoSave.js" type="text/javascript"></script>
  </head>
  <body>
  <form action="#" method="POST" id="form1" onSubmit="DeleteCookie('AutoSaveContent')">
  <table style="width: 100%;">
   <tr>
    <td class="style1"> 文章名 </td>
    <td><input id="Name" type="text" name="Name" /></td>
   </tr>
   <tr>
    <td class="style1"> 文章内容 </td>
    <td><textarea id="Content" name="Content" onkeyup="AutoSave(this);" onselect="AutoSave(this);" onclick="AutoSave(this);" ></textarea></td>
   </tr>
   <tr>
    <td colspan="2" style="text-align: center"><input name="提交" type="submit" id="Button1" value="button" /></td>
   </tr>
   <tr>
    <td colspan="2" style="text-align: center"><div id="AutoSaveMsg"> &nbsp;</div></td>
   </tr>
  </table>
  </form>
</body>
</html>





--用法

//1、导入 js
//2、form的 onSubmit 指如果提交了就删除该 cookie, 而 DeleteCookie 也是自定义的一个函数。
//3、textarea 里的 onkeyup 是指当按键时访问 AutoSave, 用以存储新写入的文字。而 onselect 和 onclick 用以新访问时确定导入自动保存的文字。

试试其它关键字

　自动保存草稿　

同语言下

可能有用的

x123jing贡献的其它代码(6)