js+cookies实现自动保存草稿功能

最新推荐文章于 2021-12-23 12:58:45 发布

x123jing

最新推荐文章于 2021-12-23 12:58:45 发布

阅读量1.8k

点赞数

分类专栏：前台界面文章标签： cookies function button xhtml 浏览器存储

本文链接：https://blog.csdn.net/x123jing/article/details/7107519

版权

前台界面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

现在提供一个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" οnkeyup="AutoSave(this);" οnselect="AutoSave(this);" οnclick="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">  </div></td>
      </tr>
    </table>
    </form>
</body>
</html>

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

效果图如下：（将下图另存为，然后把扩展名改为rar，就可以得到js源码）

x123jing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+cookies实现自动保存草稿功能

这个功能很常见。是为了防止浏览器崩溃或提交不成功而导致自己辛辛苦苦写就的东西消失掉。Gmail 里也这个东西。现在提供一个js，js是网上下载的，它的原理是将该文本框的东西存储进一个 Cookie. 如果没提交成功（原因可能是浏览器崩溃），下次访问该页面时询问是否导入上次存储的东西。function AutoSave(it) { var _value = it.value; i
复制链接

扫一扫