<!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.js 中使用（...）运算符报错

    今天在起别人项目的时候, 发现报错. 这个错误是,项目中不识别es6的扩展运算符, 解决方式很简单. // 第一步 cnpm install babel-plugin-transform-object ...

  2. React Native Debug原理浅析

    第一次在segmentfault写博客,很紧张~~~公司项目上ReactNative,之前也是没有接触过,所以也是一边学习一边做项目了,最近腾出手来更新总结了一下RN的Debug的一个小知识点,不是说 ...

  3. js对象中关于this关键字的作用

    前两天在前端群看到群友问的一个问题,问题如下: var Name = 'window'; var obj = { Name:'obj字符串', getName:function(){ console. ...

  4. 用 HTML5 造个有诚意的 23D 招聘稿

    前言 招聘对于一个公司来说是相当重要的一个环节,首先它影响着公司未来发展的趋势,其次它为公司注入新鲜血液,使公司更具有活力.当然在工业互联网,物联网大背景下诞生的 HT 也是需要注入新鲜的血液来进一步 ...

  5. Web实验一 国内旅游界面

    Web实验一  旅游界面的设计 一.首页代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  6. Spring源码阅读笔记05：自定义xml标签解析

    在上篇文章中,提到了在Spring中存在默认标签与自定义标签两种,并且详细分析了默认标签的解析,本文就来分析自定义标签的解析,像Spring中的AOP就是通过自定义标签来进行配置的,这里也是为后面学习 ...

  7. 写于疫情期间的一个plantUML例子

    @startuml 这几天的正经事 start repeat if(思维清晰) then (yes) :刷题; else (no) if(想写程序) then (yes) :调项目; else (no ...

  8. appnium适应之配置

    一.session #获取包名和acctivename#这个工具在adk包里面aapt.exe dump badging E:\Wandoujia_851097_web_seo_baidu_binde ...

  9. C# Bitmap 转 Bytes数组

    首先是Bitmap 转 MemoryStream MemoryStream ms = new MemoryStream(); bitmap.save(ms, ImageFormat.Jpeg); ms ...

  10. centos下配置Nginx

    首先NGINX是一个高效的HTTP和反向代理的服务器,这里记录一下它的安装方式和文件结构方便以后查看.同时Linux系统具有灵活性,其他的东西可查看具体的官网信息:https://nginx.org/ ...