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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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时间戳转换的示例
2014/03/31 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
彻底搞懂Python字符编码
2018/01/23 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
怎么快速自学python
2020/06/22 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
Java语言的优势
2015/01/10 面试题
工作疏忽检讨书500字
2014/10/26 职场文书
法律意见书范文
2015/06/04 职场文书
导游词之山东八大关
2019/12/18 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
用Python selenium实现淘宝抢单机器人
2021/06/18 Python