JavaScript登入記住密碼操作的簡單程式碼分享-js教程-PHP中文網

JavaScript登入記住密碼操作的簡單程式碼分享

黄舟

發布： 2017-03-23 14:32:54

原創

1637 人瀏覽過

本文跟大家分享一段簡單的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=&#39;submit&#39; value="登录">
</form>
<script>
  window.onload = function(){
    var oForm = document.getElementById(&#39;loginForm&#39;);
    var oUser = document.getElementById(&#39;user&#39;);
    var oPswd = document.getElementById(&#39;pswd&#39;);
    var oRemember = document.getElementById(&#39;remember&#39;);
    //页面初始化时，如果帐号密码cookie存在则填充
    if(getCookie(&#39;user&#39;) && getCookie(&#39;pswd&#39;)){
      oUser.value = getCookie(&#39;user&#39;);
      oPswd.value = getCookie(&#39;pswd&#39;);
      oRemember.checked = true;
    }
    //复选框勾选状态发生改变时，如果未勾选则清除cookie
    oRemember.onchange = function(){
      if(!this.checked){
        delCookie(&#39;user&#39;);
        delCookie(&#39;pswd&#39;);
      }
    };
    //表单提交事件触发时，如果复选框是勾选状态则保存cookie
    oForm.onsubmit = function(){
      if(remember.checked){ 
        setCookie(&#39;user&#39;,oUser.value,7); //保存帐号到cookie，有效期7天
        setCookie(&#39;pswd&#39;,oPswd.value,7); //保存密码到cookie，有效期7天
      }
    };
  };
  //设置cookie
  function setCookie(name,value,day){
    var date = new Date();
    date.setDate(date.getDate() + day);
    document.cookie = name + &#39;=&#39; + value + &#39;;expires=&#39;+ date;
  };
  //获取cookie
  function getCookie(name){
    var reg = RegExp(name+&#39;=([^;]+)&#39;);
    var arr = document.cookie.match(reg);
    if(arr){
      return arr[1];
    }else{
      return &#39;&#39;;
    }
  };
  //删除cookie
  function delCookie(name){
    setCookie(name,null,-1);
  };
</script>
</body>
</html>

登入後複製

以上是JavaScript登入記住密碼操作的簡單程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！