上一章简单介绍了JS判断服务器端文件是否存在(三),如果没有看过，请观看上一章 在登录页面的时候，常常设置记住用户名和密码。虽说，可以用服务器端利用cookies进行记住密码。但最好还是在前端进行相关的记住密码。
在plugins文件夹下，放置cookie.js,和jquery.js。
二 在前端界面进行相关的引用.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录页面 </title> <!--Bootstrap Stylesheet [ REQUIRED ]--> <link href="https://www.ctyun.cn/portal/link.html?target=plugins%2Fbootstrap%2Fcss%2Fbootstrap.min.css" rel="stylesheet"> <link href="https://www.ctyun.cn/portal/link.html?target=plugins%2Fbootstrap%2Fcss%2Fbootstrap-theme.min.css" rel="stylesheet"> <link href="https://www.ctyun.cn/portal/link.html?target=plugins%2Fanimate-css%2Fanimate.min.css" rel="stylesheet"> <link href="https://www.ctyun.cn/portal/link.html?target=plugins%2Ffont-awesome%2Fcss%2Ffont-awesome.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4 col-sm-offset-8" style="margin-top: 100px;padding-right:0;"> <form class="form-horizontal" id="loginForm"> <div class="" id="upTab"> <div class="form-group"> <!-- 记住,input框的name值，要与cookie.js中的key值相同 --> <input type="text" class="form-control" id="userName" placeholder="用户名" name="userName"> <i class="fa fa-user"></i> </div> <div class="form-group help"> <input type="password" class="form-control" id="userPW" placeholder="密 码" name="userPW"> <i class="fa fa-lock"></i> </div> <div class="form-group"> <div class="main-checkbox1"> <input type="checkbox" value="None" id="remember" name="check" checked="checked" /> </div> <label class="text" for="remember">记住我</label> <button type="button" class="btn btn-default" id="login">登录</button> </div> </div> </form> </div> </div> </div> <script src="plugins/jquery/jquery-2.1.1.min.js"></script> <script src="plugins/jquery/jquery.cookie.js"></script> <script src="plugins/bootstrap/js/bootstrap.min.js"></script> <script src="login.js"></script> </body> </html>
三 相关的JS代码
$(document).ready(function () {
//如果以前选择了记住密码，则设置复选框的值，将密码和用户名取出来。 否则取消选中。
if ($.cookie("remember") == "true") {
//设置前端的复选框被选中
$("#remember").prop("checked", true);
$("#userName").val($.cookie("userName"));
$("#userPW").val($.cookie("userPW"));
}else{
$("#remember").prop("checked", false);
}
//单击登录按钮，执行on_click方法。
$("#login").click(on_click);
});
需要单独设置一个save()方法，在登录时，调用这个save()方法.
//记住用户名密码
function Save() {
//如果选择了
if ($("#remember").prop("checked")) {
//取出页面上用户名和密码的值
var str_username = $("#userName").val();
var str_password = $("#userPW").val();
//利用cookie.js，放置到cookie中。 将用户名，密码，是否保存，放置到cookie中.
$.cookie("remember", "true", { expires: 7 }); //存储一个带7天期限的cookie
$.cookie("userName", str_username, { expires: 7 });
$.cookie("userPW", str_password, { expires: 7 });
}
//如果没有选择了,则取消cookie存储的值
else {
$.cookie("remember", "false", { expire: -1 });
$.cookie("userName", "", { expires: -1 });
$.cookie("userPW", "", { expires: -1 });
}
};
在调用on_click()登录方法之时，调用这个save()方法。
function on_click(){
//判断复选框的值
Save();
//下面是具体的登录操作
}
四. 重启服务器，进行相关的验证
关掉浏览器后，重新打开，发现可以记住用户名和密码。
