js cookie realizes the function of remembering passwords

  • 2021-07-12 04:56:10
  • OfStack

In this article, we share the methods of remembering passwords in js and jQuery, as follows

1. js realizes the function of remembering passwords

html:


<form id="form22" name="form22" action="checklogin.action" method="post" >
 <div class="username" style="margin-top:50px;">
  <label> User name: </label>
  <input type="text" name="username" id="userName" />
  <span id="myuser" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="password">
  <label> Dense &nbsp; Code: </label>
  <input name="password" id="passWord" type="password" />
  <span id="mypass" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="user_type" >
  <label>&nbsp;&nbsp;</label>
  <input type="checkbox" id="saveUserName" style="float: left; margin-top:3px;" /> 
  <span>  Remember the user </span>  
 </div>

 <input type="button" value="" class="btn_login" id="btn_login" onclick="checkform();"/>

</form>

cookie.js:


function setCookie (name, value) {
  var Days = 30; // This  cookie  Will be saved  30  Days 
  var exp = new Date();
  exp.setTime(exp.getTime() + 1000);
  if(value==""||value=="null"
   ||value=="null"||value==" "){
  }else{
  document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038 19:14:07 GMT";
  }
}
function getCookie(sName){
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0])
   {
    return aCrumb[1];
   }
  }
  return null;
}
function checkCookieExist(name){
 if (getCookie(name))
  return true;
 else
  return false;
}

function deleteCookie(name, path, domain){
 var strCookie;
 //  Check Cookie Does it exist 
 if (checkCookieExist(name)){
  //  Settings Cookie The time limit of has expired 
  strCookie = name + "=";
  strCookie += (path) ? "; path=" + path : "";
  strCookie += (domain) ? "; domain=" + domain : "";
  strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  document.cookie = strCookie;
 }
}
function saveCookie(name, value, expires, path, domain, secure){
 var strCookie = name + "=" + value;
 if (expires){
  //  Calculation Cookie Duration of ,  The parameter is days 
  var curTime = new Date();
  curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
  strCookie += "; expires=" + curTime.toGMTString();
 }
 // Cookie Path of 
 strCookie += (path) ? "; path=" + path : "";
 // Cookie Adj. Domain
 strCookie += (domain) ? "; domain=" + domain : "";
 //  Do you need secure transmission , For 1 Boolean values 
 strCookie += (secure) ? "; secure" : "";
 document.cookie = strCookie;
}

login.js


window.onload = function(){
 //console.log("ctx: " + "${ctx}");

 var name = getCookie("loginUserName");
 document.getElementById("passWord").value="";
 if(name != null && name != "") {
  document.getElementById("userName").value = name;      

  document.getElementById("passWord").focus();
 } else {  document.getElementById("userName").focus();
 }

}

function checkform(){
 ......
 var isChecked = document.getElementById("saveUserName").checked;
 if(isChecked) {
  setCookie("loginUserName",userName);
 } 
 ......
}

2. jquery realizes the function of remembering passwords

Reference: http://www.cnblogs.com/lindaZ/p/5069981. html

html:


<form class="form-signin">
    <input type="text" id="username" name="account" autofocus required placeholder=" User name " class="form-control" style="width: 250px; margin-bottom: 5px;">
    <input type="password" id="password" name="password" required placeholder=" Password " class="form-control" style="width: 250px;">
    <br/>
    <input id="remember_me" type="checkbox" name="remember_me" onkeydown="check_enter(event)" style="width:250;">
    <span for="remember_me" onkeydown="check_enter(event)" style="width:250px"> Remember me </span>
    <br/><br/>
    <span class="btn btn-lg btn-primary btn-block"> Deng   Record </span>
</form>
<script src="jquery.js" type="text/javascript"></script>
   <script src="jquery.cookie.js" type="text/javascript"></script>

Whether the checkbox is selected is judged, and if so, the cookie is stored:


if ($("#remember_me").attr("checked")) {
      $.cookie("rmbUser", "true", { expires: 7 }); // Storage 1 A band 7 Of a time limit of days cookie
      $.cookie("username", account, { expires: 7 });
      $.cookie("password", password, { expires: 7 });
}
else {
      $.cookie("rmbUser", "false", { expire: -1 });
      $.cookie("username", "", { expires: -1 });
      $.cookie("password", "", { expires: -1 });
}

When js is loaded on the login page each time, the user name and password in cookie are taken out. If cookie is not empty, the user name and password input boxes are filled with the contents in cookie, and the check box is set to the checked state:


$().ready(function(){
      // Get cookie Value of 
      var username = $.cookie('username');
      var password = $.cookie('password');

      // Fill the obtained value into the input box 
      $('#username').val(username);
      $('#password').val(password); 
      if(username != null && username != '' && password != null && password != ''){
  // Select the Save Secret check box 
       $("#remember_me").attr('checked',true);
}

Related articles: