<!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管理后台（完结）：标签式输入、名值对输入、对话框（modal dialog）

    一周的时间,几乎每天都要工作十几个小时,敲代码+写作文,界面原型算是完成了,下一步是写内核的HTML处理引擎,纯JS实现.本次实战展示告一段落,等RXEditor下一个版本完成,再继续分享吧.剩下的功 ...

  2. weex 和 appcan 的个人理解

    appcan是浏览器技术,前端代码运行在webview上,而weex是原生引擎渲染,说白了就是把H5翻译成原生. weex的官网上说,在开发weex页面就像开发普通网页一样,在渲染weex页面时和原生 ...

  3. Mac上Burpsuite 拦截不到HTTPS流量怎么设置

    在百度了一堆以及修修改改下终于拦截到HTTPS流量了. 安装步骤就大致讲一下吧 网上下载burp的安装包,然后Mac上直接打开这个burpUnlimited.jar包就可以了 我直接选择的第一个   ...

  4. 为.net Core 3.0 WebApi 创建Linux守护进程

    前言 我们一般可以在Linux服务器上执行 dotnet <app_assembly.dll> 命令来运行我们的.net Core WebApi应用.但是这样运行起来的应用很不稳定,关闭终 ...

  5. python读取文件指定行内容

    python读取文件指定行内容 import linecache text=linecache.getline(r'C:\Users\Administrator\Desktop\SourceCodeo ...

  6. ajax3

    json json:JavaScript对象表示方法(JavaScript object notation) json:是存储和交换文本信息的语法,类似与xml.他使用键值对的方式来组织,易于人们阅读 ...

  7. Vue 学习记录（一）

    Vue 研究了一段时间,要学的东西挺多的. 一.基本指令 1.v-text:2.v-html:3.v-pre;4.v-cloak:5.v-once:6.v-if:7.v-else:8.v-else-i ...

  8. foobox，基于foobar2000汉化版的CUI配置整合版

    名 称:foobox 作 者:dreamawake 发布博客:https://www.cnblogs.com/foobox/ GitHub: https://github.com/dream7180/ ...

  9. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  10. Linux 部署Tomcat图文注解 一学就会

    导读 安装tomcat前首先要安装对应的jdk并配置Java环境. 安装jdk,请参考:点我直达 安装Tomcat 下载Tomcat包 官网地址:点我直达 Tomcat与jdk兼容关系 注:Tomca ...