AutoSave/自动存储功能实现
更新时间：2007年03月24日 00:00:00 作者：
转自: http://www.fayland.org/journal/AutoSave.html
这个功能很常见。是为了防止浏览器崩溃或提交不成功而导致自己辛辛苦苦写就的东西消失掉。Gmail 里也这个东西。它的原理是将该文本框的东西存储进一个 Cookie. 如果没提交成功（原因可能是浏览器崩溃），下次访问该页面时询问是否导入上次存储的东西。
function AutoSave(it) { // it 指调用的文本框
var _value = it.value; // 获得文本框的值
if (!_value) {
var _LastContent = GetCookie('AutoSaveContent'); // 获得 cookie 的值，这里的 GetCookie 是个自定义函数，参见源代码
if (!_LastContent) return; // 如果该 cookie 没有值，说明是新的开始
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();
而这 HTML 中应当如此：// SetCookie 这里就是设置该 cookie
document.cookie = "AutoSaveContent=" + escape (_value) + expires;
}
}
第一句导入 js, 第二句的 onSubmit 指如果提交了就删除该 cookie, 而 DeleteCookie 也是自定义的一个函数。参见源代码。
<script language=JavaScript src='/javascript/AutoSave.js'></script>
<form action="submit" method="POST" onSubmit="DeleteCookie('AutoSaveContent')">
<textarea rows="5" cols="70" wrap="virtual" onkeyup="AutoSave(this);" onselect="AutoSave(this);" onclick="AutoSave(this);"></textarea>
<input type="submit"></form>
textarea 里的 onkeyup 是指当按键时访问 AutoSave, 用以存储新写入的文字。
而 onselect 和 onclick 用以新访问时确定导入自动保存的文字。
大致就是如此。 Enjoy!
源代码：http://www.fayland.org/javascript/AutoSave.js
相关文章
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
发请求有两种方式，一种是用ajax，另一种是用form提交，默认的form提交如果不做处理的话，会使页面重定向。本篇文章通过实例给大家介绍基于iframe/FormData/FileReader三种无刷新上传文件的方法，感兴趣的朋友一起学习吧2015-12-12
这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了微信小程序实现Timeline时间线效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理
页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。容器的尺寸是指当前分辨率下的高度和宽度（分辨率不同，值就不相同）。2023-02-02
现在使用手机上网的人越来越多，一些下载网站会通过判断不同系统手机来访问不同网页，比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问2015-07-07
比较了下Bootstrap的popover和一些其它的开源项目，觉得Bootstrap的还算不错。在使用过程中遇到了一系列问题，下面小编给大家分享Bootstrap弹出框（Popover）被挤压的问题小结，需要的朋友参考下吧2017-07-07
下面小编就为大家带来一篇js删除Array数组中指定元素的两种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了服务端预渲染之Nuxt(使用篇)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
javascript原生封装一个淡入淡出效果的函数测试实例代码
这篇文章主要介绍了javascript原生封装一个淡入淡出效果的函数,主要有FadeIn淡入函数和FadeOut淡出函数，需要的朋友可以参考下2018-03-03
这篇文章主要介绍了javascript鼠标放上后下边对应内容变换的方法,实例分析了javascript实现tab切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论