<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>记住用户名密码操作</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
body,
div,
ul,
li,
input {
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 15px;
box-sizing: border-box;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
.box input {
width: 100%;
padding: 8px 5px;
box-sizing: border-box;
}
input[type="checkbox"] {
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<input type="text" id="username" name="username" class="form-control" placeholder="用户名" autofocus/>
</li>
<li>
<input type="password" id="userpwd" name="userpwd" class="form-control" placeholder="密码" autofocus/>
</li>
<li>
<input type="checkbox" name="rememberUser" checked="true" id="rememberUser" />记住密码
</li>
<li>
<input type="submit" class="btn" value="登录" id="btn-submit" />
</li>
</ul>
</div>
<script>
$(function() {
if($.cookie("rememberUser")) {
$("#rememberUser").attr("checked", true);
$("#username").val($.cookie("userName"));
$("#userpwd").val($.cookie("passWord"));
}
})
$("#btn-submit").on("click", function() {
var userName = $("#username").val();
var passWord = $("#userpwd").val();
var flag = $("#rememberUser").prop("checked");
if(flag) {
$.cookie("rememberUser", "true", {
expires: 7
});
$.cookie("userName", userName, {
expires: 7
});
$.cookie("passWord", passWord, {
expires: 7
});
location.href="https://www.baidu.com/";
} else {
$.cookie("rememberUser", "false", {
expires: -1
});
$.cookie("userName", '', {
expires: -1
});
$.cookie("passWord", '', {
expires: -1
});
}
})
</script>
</body>
