欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript登录记住密码操作(超简单代码)

程序员文章站 2022-07-10 10:03:54
废话不多说了,直接给大家贴代码了,具体代码如下所示: <...

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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登录记住密码操作(超简单代码),希望对大家有所帮助