AutoSave/自动存储功能实现


Posted in Javascript onMarch 24, 2007

转自: 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();

       // SetCookie 这里就是设置该 cookie
        document.cookie = "AutoSaveContent=" + escape (_value) + expires;
    }
}
而这 HTML 中应当如此:
<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>
第一句导入 js, 第二句的 onSubmit 指如果提交了就删除该 cookie, 而 DeleteCookie 也是自定义的一个函数。参见源代码。
textarea 里的 onkeyup 是指当按键时访问 AutoSave, 用以存储新写入的文字。
而 onselect 和 onclick 用以新访问时确定导入自动保存的文字。

大致就是如此。 Enjoy!

源代码:http://www.fayland.org/javascript/AutoSave.js

 

Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
javascript 快速排序函数代码
May 30 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 #Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 #Javascript
漂亮的提示信息(带箭头)
Mar 21 #Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 #Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 #Javascript
表单提交时自动复制内容到剪贴板的js代码
Mar 16 #Javascript
You might like
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
给女儿的表扬信
2014/01/18 职场文书
小学语文国培感言
2014/03/04 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
2015年新教师工作总结
2015/04/28 职场文书
张丽莉观后感
2015/06/16 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android