Home >Web Front-end >JS Tutorial >JavaScript uses cookies to implement the function of remembering account passwords_javascript skills

JavaScript uses cookies to implement the function of remembering account passwords_javascript skills

WBOYOriginal: 2016-05-16 16:02:081707browse

Many login functions have a "remember password" function, which is actually nothing more than reading cookies.

The code for this function is shown below, and the original author has been unable to trace it. . . .

Test method: directly enter the account password, after submission, refresh the page, and then enter the same account number, it will be displayed

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js COOKIE 记住帐号或密码</title>
<script type="text/javascript">
  window.onload=function onLoginLoaded() {
    if (isPostBack == "False") {
      GetLastUser();
    }
  }
   
  function GetLastUser() {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
    var usr = GetCookie(id);
    if (usr != null) {
      document.getElementById('txtUserName').value = usr;
    } else {
      document.getElementById('txtUserName').value = "001";
    }
    GetPwdAndChk();
  }
  //点击登录时触发客户端事件
   
  function SetPwdAndChk() {
    //取用户名
    var usr = document.getElementById('txtUserName').value;
    alert(usr);
    //将最后一个用户信息写入到Cookie
    SetLastUser(usr);
    //如果记住密码选项被选中
    if (document.getElementById('chkRememberPwd').checked == true) {
      //取密码值
      var pwd = document.getElementById('txtPassword').value;
      alert(pwd);
      var expdate = new Date();
      expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
      //将用户名和密码写入到Cookie
      SetCookie(usr, pwd, expdate);
    } else {
      //如果没有选中记住密码,则立即过期
      ResetCookie();
    }
  }
   
  function SetLastUser(usr) {
    var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
    var expdate = new Date();
    //当前时间加上两周的时间
    expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
    SetCookie(id, usr, expdate);
  }
  //用户名失去焦点时调用该方法
   
  function GetPwdAndChk() {
    var usr = document.getElementById('txtUserName').value;
    var pwd = GetCookie(usr);
    if (pwd != null) {
      document.getElementById('chkRememberPwd').checked = true;
      document.getElementById('txtPassword').value = pwd;
    } else {
      document.getElementById('chkRememberPwd').checked = false;
      document.getElementById('txtPassword').value = "";
    }
  }
  //取Cookie的值
   
  function GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
      var j = i + alen;
      //alert(j);
      if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0) break;
    }
    return null;
  }
  var isPostBack = "<%= IsPostBack %>";
   
  function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
  }
  //写入到Cookie
   
  function SetCookie(name, value, expires) {
    var argv = SetCookie.arguments;
    //本例中length = 3
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) &#63; argv[2] : null;
    var path = (argc > 3) &#63; argv[3] : null;
    var domain = (argc > 4) &#63; argv[4] : null;
    var secure = (argc > 5) &#63; argv[5] : false;
    document.cookie = name + "=" + escape(value) + ((expires == null) &#63; "" : ("; expires=" + expires.toGMTString())) + ((path == null) &#63; "" : ("; path=" + path)) + ((domain == null) &#63; "" : ("; domain=" + domain)) + ((secure == true) &#63; "; secure" : "");
  }
   
  function ResetCookie() {
    var usr = document.getElementById('txtUserName').value;
    var expdate = new Date();
    SetCookie(usr, null, expdate);
  }
</script>
</head>
<body>
<form id="form1">
 <div> 用户名:
  <input type="text" ID="txtUserName" onblur="GetPwdAndChk()">
  <input type="password" ID="txtPassword">
  密码：
  <input type="checkbox" ID="chkRememberPwd" />
  记住密码
  <input type="button" OnClick="SetPwdAndChk()" value="进入"/>
 </div>
</form>
</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript arrays and loops_javascript skillsNext article：Detailed explanation of JavaScript arrays and loops_javascript skills

See more

JavaScript uses cookies to implement the function of remembering account passwords_javascript skills

Related articles