AutoSave/自动存储功能实现

转自: 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

赞 (0)

相关推荐

  • AutoSave/自动存储功能实现

    转自: http://www.fayland.org/journal/AutoSave.html 这个功能很常见.是为了防止浏览器崩溃或提交不成功而导致自己辛辛苦苦写就的东西消失掉.Gmail 里也这个东西.它的原理是将该文本框的东西存储进一个 Cookie. 如果没提交成功(原因可能是浏览器崩溃),下次访问该页面时询问是否导入上次存储的东西.function AutoSave(it) { // it 指调用的文本框    var _value = it.value;    // 获得文本框的值

  • Yii2框架实现登录、退出及自动登录功能的方法详解

    本文实例讲述了Yii2框架实现登录.退出及自动登录功能的方法.分享给大家供大家参考,具体如下: 自动登录的原理很简单.主要就是利用cookie来实现的 在第一次登录的时候,如果登录成功并且选中了下次自动登录,那么就会把用户的认证信息保存到cookie中,cookie的有效期为1年或者几个月. 在下次登录的时候先判断cookie中是否存储了用户的信息,如果有则用cookie中存储的用户信息来登录, 配置User组件 首先在配置文件的components中设置user组件 'user' => [ '

  • 分步解析JavaScript实现tab选项卡自动切换功能

    本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

  • Android实现APP自动更新功能

    现在一般的android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.该小程序实现的就是这个功能. 该小程序的特点是,当有更新时,会弹出一个提示框,点击确定,则在通知来创建一个进度条进行下载,点击取消,则取消更新. 以下是详细代码: 1.创建布局文件notification_item.xml,用于在通知栏生成一个进度条和下载图标. <?xml version="1.0" encoding="utf-8"?>

  • PHP cookie，session的使用与用户自动登录功能实现方法分析

    本文实例讲述了PHP cookie,session的使用与用户自动登录功能实现方法.分享给大家供大家参考,具体如下: cookie的使用 //生成cookie //注释:setcookie() 函数必须位于 <html> 标签之前. //setcookie(name, value, expire, path, domain); //名称,值,过期时间,有效路径,有效域名 //path,可选:如果路径设置为 "/",那么 cookie 将在整个域名内有效.如果路径设置为 &q

  • spring security实现下次自动登录功能过程解析

    spring security实现下次自动登录功能过程解析

    这篇文章主要介绍了spring security实现记住我下次自动登录功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.原理分析 第一次登陆时,如果用户勾选了readme选项,登陆成功后springsecurity会生成一个cookie返回给浏览器端,浏览器下次访问时如果携带了这个cookie,springsecurity就会放行这次访问. 二.实现方式 2.1 简单实现方式 (1) 在springsecurity的配置文件中,http节

  • JavaWeb实现简单的自动登录功能

    JavaWeb实现简单的自动登录功能

    本文实例为大家分享了JavaWeb实现简单的自动登录功能的具体代码,供大家参考,具体内容如下 用最近所学的知识点实现自动登录,主要有: 1.Filter过滤器 2.session & cookie 一.需求分析 二.准备工作 1. 项目目录 2. 导入相应的jar包 三.代码实现 1. 搭建环境 1.1 搭建数据库.数据库表 数据库[user],数据库表[t_user] 1.2 搭建页面 登录页面[login.jsp] <body> <form action="Logi

  • JavaWeb实现自动登录功能

    JavaWeb实现自动登录功能

    本文实例为大家分享了JavaWeb实现自动登录功能的具体代码,供大家参考,具体内容如下 自动登录是通过存储cookie值来实现的. 工程目录如下: login.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

  • Spring Security基于散列加密方案实现自动登录功能

    Spring Security基于散列加密方案实现自动登录功能

    目录 前言 一. 自动登录简介 1. 为什么要自动登录 2. 自动登录的实现方案 二. 基于散列加密方案实现自动登录 1. 配置加密令牌的key 2. 配置SecurityConfig类 3. 添加测试接口 4. 启动项目测试 三. 散列加密方案实现原理 1. cookie的加密原理分析 2. cookie的解码原理分析 3. 自动登录的源码分析 3.1 令牌生成的源码分析 3.2 令牌解析的源码分析 前言 在前面的2个章节中,一一哥 带大家实现了在Spring Security中添加图形验证码

  • Python Flask前端自动登录功能实现详解

    目录 引言 1. 登录时 2. 定义全局拦截器 引言 在已有的网站中,几乎所有的网站都已经实现了 自动登录 所谓自动登录,其实就是在你登录后,然后关闭浏览器,接着再启动浏览器重新进入刚刚的网站时,无需自己再次登录.更准确的说,在一段时间内,无需自己再次登录 思路:其实所谓的自动登录,到最后的后端逻辑,和你正常的登录逻辑是一样的,也是判断用户名和密码是否正确.只是我们要省略让用户再次输入用户名和密码的步骤,那么肯定就要将用户名和密码存储在一个地方.当检测到用户再次进入时,看看是否满足可以自动登录的

随机推荐