• JS前端记住密码


    JS前端记住密码

    <!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>
    View Code
    用户名:
    密   码: 

  • 相关阅读:
    MySQL 5.7--------SSL连接最佳实战
    Redis服务搭建及操作
    3.MongoDB基本命令用法
    1.MySQL数据库常用命
    ARM架构安装Kubernetes集群
    更新iManager离线镜像包方法
    iManager for K8S 配置https证书流程步骤
    iManager微服务(云套件)配置https证书流程步骤
    Docker修改IP地址方法
    SuperMap iPortal对接流数据方案
  • 原文地址:https://www.cnblogs.com/apeng/p/14265332.html
Copyright © 2020-2023  润新知