jQuery記住使用者名稱和密碼效果程式碼例項

admin發表於2018-05-22
jQuery密碼

本章節分享一段程式碼例項，它實現了利用jquery記住使用者名稱和密碼的效果。

當然這裡我們也用到了jquery.cookie.js外掛，這個是專門用來操作cookie。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
  if ($.cookie("rmbUser") == "true") {
    $("#ck_rmbUser").attr("checked", true);
    $("#txt_username").val($.cookie("username"));
    $("#txt_password").val($.cookie("password"));
  }
});
  
//記住使用者名稱密碼
function Save() {
  if ($("#ck_rmbUser").attr("checked")) {
    var str_username = $("#txt_username").val();
    var str_password = $("#txt_password").val();
    $.cookie("rmbUser", "true", { expires: 7 }); //儲存一個帶7天期限的cookie
    $.cookie("username", str_username, { expires: 7 });
    $.cookie("password", str_password, { expires: 7 });
  }
  else {
    $.cookie("rmbUser", "false", { expire: -1 });
    $.cookie("username", "", { expires: -1 });
    $.cookie("password", "", { expires: -1 });
  }
};
</script>
</head>
<body>
<div>
  使用者名稱：<input type="text" id="txt_username"/><br />
    密碼：<input type="text" id="txt_password"/><br />
    <input type="checkbox" id="ck_rmbUser"/>記住使用者名稱和密碼<br />
    <input type="submit" id="sub" value="登入"/>
</div>
</body>
</html>

相關文章