(jQuery)使用cookie实现在客户端保存账号和密码

HTML页面

<input class="u-input" type="text" placeholder="用户账号" id="username" />

<input class="u-pass" type="password" id="password" />

<input type="checkbox" onclick="save()" id="ck_rmbUser"/>记住账号

<button class="login"  onclick="loginclick()">登录</button>

引入cookie插件

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

实现方法

<script type="text/javascript">
 $(document).ready(function() {
  if ($.cookie("rmbUser") == "true") {
   $("#ck_rmbUser").attr("checked", true);
   $("#username").val($.cookie("username"));
   $("#password").val();
   $("#password").val($.cookie("password"));
  }
 });
</script>

//记住用户名密码
<script type="text/javascript">
 function save() {
  if ($("input[type='checkbox']").is(':checked')) {
   var username = $("#username").val();
   var password = $("#password").val();
   $.cookie("rmbUser", "true", {
    expires : 7
   }); //存储一个带7天期限的cookie
   $.cookie("username", username, {
    expires : 7
   });
   $.cookie("password", password, {
    expires : 7
   });
  } else {
   $.cookie("rmbUser", "false", {
    expire : -1
   });
   $.cookie("username", "", {
    expires : -1
   });
   $.cookie("password", "", {
    expires : -1
   });
  }
 };

//登录方法
 function loginclick() {
  if ($("#username").val() == null || $("#username").val() == "") {
   alert("用户名不能为空!")
  }
  if ($("#password").val() == null || $("#password").val() == "") {
   alert("密码不能为空!")
  }
  $.ajax({
   url : "index/login",
   type : "post",
   data : {
    login_name : $("#username").val().trim(),
    login_password : $("#password").val().trim(),
    verify_code : $("#u-ver").val().trim()
   },
   dataType : "json",
   contentType : "application/x-www-form-urlencoded;charset=utf-8",
   success : function(data) {
    //data为jeson对象,判断code值,0登陆成功1,登陆失败
    if (data.login_code == "0") {
     //登陆成功后跳转到主页面
     window.location.href = "main.html";
    } else {
     //登陆密码错误后清空密码框
     document.getElementById("password").value = "";
     alert(data.login_result);
    }
   }
  });
 }
</script>

猜你喜欢

转载自www.cnblogs.com/wjx2018/p/9145146.html