<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>记住密码</title>

</head>

<body>

<form id="loginForm">

  <input id="user" type="text" placeholder="用户名"><br>

  <input id="pswd" type="password" placeholder="密码"><br>

  <label><input id="remember" type="checkbox">记住密码</label><br>

  <input type='submit' value="登录">

</form>

<script>

  window.onload = function(){

    var oForm = document.getElementById('loginForm');

    var oUser = document.getElementById('user');

    var oPswd = document.getElementById('pswd');

    var oRemember = document.getElementById('remember');

    //页面初始化时，如果帐号密码cookie存在则填充

    if(getCookie('user') && getCookie('pswd')){

      oUser.value = getCookie('user');

      oPswd.value = getCookie('pswd');

      oRemember.checked = true;

    }

    //复选框勾选状态发生改变时，如果未勾选则清除cookie

    oRemember.onchange = function(){

      if(!this.checked){

        delCookie('user');

        delCookie('pswd');

      }

    };

    //表单提交事件触发时，如果复选框是勾选状态则保存cookie

    oForm.onsubmit = function(){

      if(remember.checked){

        setCookie('user',oUser.value,7); //保存帐号到cookie，有效期7天

        setCookie('pswd',oPswd.value,7); //保存密码到cookie，有效期7天

      }

    };

  };

  //设置cookie

  function setCookie(name,value,day){

    var date = new Date();

    date.setDate(date.getDate() + day);

    document.cookie = name + '=' + value + ';expires='+ date;

  };

  //获取cookie

  function getCookie(name){

    var reg = RegExp(name+'=([^;]+)');

    var arr = document.cookie.match(reg);

    if(arr){

      return arr[1];

    }else{

      return '';

    }

  };

  //删除cookie

  function delCookie(name){

    setCookie(name,null,-1);

  };

</script>

</body>

</html>

JavaScript登录记住密码操作的更多相关文章

  1. QT 登录记住密码方法之一：Qt QSettings读写配置文件

    不过本文写的是明文保存,最好还是加密一下,以防文件被非法读取 /**登录初始化的时候处理这部分操作*/ Settings cfg("user.ini",QSettings::Ini ...

  2. JavaScript实现记住密码功能

    用js实现记住密码功能,但是前端记住密码不安全,最好还是不要用.我感觉这个记住密码应该是通过与后台建立一个会话来实现. 这个效果的测试地址在:http://ofoyou.com/blog/rePass ...

  3. Android SharedPreferences登录记住密码

    SharedPreferences是Android中存储简单数据的一个工具类.可以想象它是一个小小的Cookie,它通过用键值对的方式把简单 数据类型(boolean.int.float.long和S ...

  4. Cookie实现登录记住密码

    Cookie实现记住登录密码,用户可以自由选择是否记住密码,或者用户之前选择记住了,但是某一次又不想记住了,需要将之前对应的Cookie删除掉 Cookie相当于map 也是键值对的形式,但是并不相同 ...

  5. vue 登录 + 记住密码 + 密码加密解密

    <template> <el-form :model="ruleForm"> <h3 class="title">系统登录& ...

  6. ios用户登录记住密码

    登录 记录已登录用户步骤,存入偏好设置中存储放入一个数组. 具体存储 :存储用户到偏好设置中,其中用户是一个数组 向服务器响应客户端后的一些操作 (如果响应数据成功)其中用户和密码是一一对应的 .1先 ...

  7. JavaWeb学习记录总结（二十九）--Servlet\Session\Cookie\Filter实现自动登录和记住密码

    一.Servlet package autologin.servlet.login; import java.io.IOException;import java.security.MessageDi ...

  8. php实现记住密码下次自动登陆

    这篇博客里面还写到 实现“记住我的登录状态”的功能方法,简言之,就是对首先对session进行用户信息赋值,检测session,失效后,利用cookie对其赋值: 在实现过程中,根据网上一些代码贴,整 ...

  9. winform 记住密码功能

      //登录        private void btn_Login_Click(object sender, EventArgs e)        {            //记住密码    ...

随机推荐

  1. java 构造器（构造方法）使用详细说明

    知识点 什么是构造器 构造器通常也叫构造方法.构造函数,构造器在每个项目中几乎无处不在.当你new一个对象时,就会调用构造器.构造器格式如下: [修饰符,比如public] 类名 (参数列表,可以没有 ...

  2. 看完这篇 HTTPS，和面试官扯皮就没问题了

    下面我们来一起学习一下 HTTPS ,首先问你一个问题,为什么有了 HTTP 之后,还需要有 HTTPS ?我突然有个想法,为什么我们面试的时候需要回答标准答案呢?为什么我们不说出我们自己的想法和见解 ...

  3. VOIP RTP RTSP 实现 Baresip 源码分析

    RTP 使用 udp 进行数据传输,udp 是不能保证,数据包一定可以到达的,也不提供时序.同时还有 MTU 限制. RTCP 用来配合 RTP 提供,传输报告,会话建立和退出. 一大批参考规范 * ...

  4. BeetleX.FastHttpApi之测试插件集成

    说到Webapi测试工具相信很多人想起Swagger,它可以非常方便地集成到项目中并进行项目Webapi接口测试.而BeetleX.FastHttpApi在新版本中也提供类似的插件,只需要引用这个插件 ...

  5. 环境变量之classpath配置和临时配置

    前言 本篇文章介绍classpath环境变量的配置和一个环境变量配置的技巧:临时配置path环境变量. 正文 classpath环境变量配置 在上完了"Hello World"这堂 ...

  6. Linux启动nginx时报错nginx: [emerg] getpwnam("nginx") failed

    编译时指定了用户而没有创建用户导致报错 解决: 查看你添加的用户是什么, [root@localhost nginx]# sbin/nginx -Vnginx version: nginx/1.10. ...

  7. vue基础----过滤器filter

    1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式  分为全局与局部的 <di ...

  8. js Vquery

    // JavaScript Document function myAddEvent(obj,sEv,fn){ alert('fn:'+fn); if(obj.attachEvent){ obj.at ...

  9. word文档常用的格式操作（分页、分节、每一节如何设置页码、以及生成目录）

    分页: 分节: 自动生成目录:

  10. 面向对象第三单元博客（JML）

    // demo/Graph.java package demo; ​ import java.util.ArrayList; ​ public class Demo { /*@ public norm ...