jquery.cookie.js实现cookie记住用户名和密码

时间:2022-10-22 09:21:26

  记得导入

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.cookie.js" type="text/javascript"></script>

  先看表单里面的内容,有一个checkbox复选框

<form class="form-signin">
  <input type="text" id="username" name="account" autofocus required placeholder="用户名" class="form-control" style="width: 250px; margin-bottom: 5px;">
  <input type="password" id="password" name="password" required placeholder="密码" 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">记住我</span>
  <br/><br/>
  <span class="btn btn-lg btn-primary btn-block">登 录</span>
</form>

  1.判断checkbox是否被选中,若选中,则将存储cookie:

  if ($("#remember_me").attr("checked")) {
    $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的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 });
  }

  在每次刷新登录页面加载js时,取出cookie中的用户名和密码,若cookie不为空,用户名和密码输入框被cookie里面的内容填充,复选框设为勾上状态:

  $().ready(function(){
    //获取cookie的值
    var username = $.cookie('username');
    var password = $.cookie('password');

    //将获取的值填充入输入框中
    $('#username').val(username);
    $('#password').val(password);
    if(username != null && username != '' && password != null && password != ''){//选中保存秘密的复选框
      $("#remember_me").attr('checked',true);
   }