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

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

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

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