<!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. a++与++a的陷阱与盲区

    故事发生在2019.7.15的3.pm,正在复习数据结构题目,写了一句如下指令(以下函数运行在win10的dev编译器下面) #include<bits/stdc++.h> using n ...

  2. 2020最新ArchLinux安装（KDE桌面）

    许多网友反映之前的教程安装好后连不上互联网,最近我刚好又安装了一遍,总结出以下没毛病的过程 按照此教程需要你会基本的vim操作(或其他文本编辑工具比如nano),基本的fdisk分盘操作(或其他分盘工 ...

  3. Netty学习（4）：NIO网络编程

    概述 在 Netty学习(3)中,我们已经学习了 Buffer 和 Channel 的概念, 接下来就让我们通过实现一个 NIO 的多人聊天服务器来深入理解 NIO 的第 3个组件:Selector. ...

  4. django models中的class meta

    Django models中的meta选项 通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(models.Model ...

  5. [Python] iupdatable包：File模块使用介绍

    一.简介 文件模块主要是对常见的文件读写功能进行了封装,默认使用UTF8(utf_8_sig)格式编码,实现一行代码读写文件. 二.简单示例 安装 iupdatable 包 pip install - ...

  6. Drf 序列化 ModelSerializer跨表取数据

    1.对于OneToOne.Foreignkey.choices字段可以使用source取出相关信息: class CourseSerializer(serializers.ModelSerialize ...

  7. go bufio 、os 包

    程序使用短变量声明创建bufio.Scanner类型的变量input. input := bufio.NewScanner(os.Stdin) 该变量从程序的标准输入中读取内容.每次调用input.S ...

  8. echart图表中legend不显示问题

    主要是legend中的name要和series中的name对应上.

  9. 常用计算机CMD 命令

      cd\  '返回到根目录  cd..  '返回到上一级目录 1 cd 显示当前目录名或改变当前目录. 2 dir 显示目录中的文件和子目录列表.  3 md 创建一个目录.  4 mkdir  创 ...

  10. 使用ASP.NET MVC 5快速实现芒果分销后台管理系统(前言)

    ### 前言 在前一篇文章中,我提到最近要陆续为大家写一些.Net实战技术文章.从今天起,我将围绕一个入门级现实的芒果分销管理系统案例,使用ASP.NET MVC 5,从前端到后端,一步一步为大家呈现 ...