<!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. VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

    接下来几篇作文,会介绍用到的输入框系列,今天会介绍组普通的调用方式,因为RXEditor要求复杂的输入功能,后面的例子会用VUE的component动态调用,就没有今天的这么直观了,控件的实现原理都一 ...

  2. Django进行数据迁移时，报错：(1064, "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '(6) NOT NULL)' at line 1"）

    进行数据迁移时: 第一步: 命令:python manage.py makemigrations 在对应的应用里面的migrations文件夹中产生了一个0001_initial.py文件 第二步:执 ...

  3. tfgan折腾笔记（三）：核心函数详述——gan_loss族

    gan_loss族的函数有: 1.gan_loss: 函数原型: def gan_loss( # GANModel. model, # Loss functions. generator_loss_f ...

  4. nginx前端服务部署

    一.登录服务器 登录跳板机 执行list,列出所有机器 执行dssh 机器序号,如dssh 1,选择机器 二. 创建nginx配置文件 进入nginx配置目录:cd usr/local/nginx/c ...

  5. MySQL字符集不一致导致性能下降25%，你敢信？

    故事是这样的: 我在对MySQL进行性能测试时,发现CPU使用率接近100%,其中80%us, 16%sys,3%wa,iostat发现磁盘iops2000以下,avgqu-sz不超过3,%util最 ...

  6. Java多线程并发01——线程的创建与终止，你会几种方式

    本文开始将开始介绍 Java 多线程与并发相关的知识,多谢各位一直以来的关注与支持.关注我的公众号「Java面典」了解更多 Java 相关知识点. 线程的创建方式 在 Java 中,用户常用的主动创建 ...

  7. centos7安装部署opentsdb2.4.0

    写在前面 安装HBase 在HBase中创建表结构 安装配置并启动opentsdb 写在前面 最近因为项目需要在读opentsdb的一部分源码,后面会做个小结分享出来.本人是不大喜欢写这种安装部署的文 ...

  8. 建议5:比较function语句和function表达式

    在Javascript语言中,既有function语句,也有函数表达式,这是令人困惑的.因为它们看起来是相同的.一个function语句就是一个值为一个函数的var语句的简写形式. 下面语句: fun ...

  9. 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法

    问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...

  10. Netty源码分析一<序一Unix网络I/O模型简介>

    Unix网络 I/O 模型   我们都知道,为了操作系统的安全性考虑,进程是无法直接操作I/O设备的,其必须通过系统调用请求内核来协助完成I/O动作,而内核会为每个I/O设备维护一个buffer.以下 ...