Cookie.js实现保存用户名和密码操作(四)

上一章简单介绍了JS判断服务器端文件是否存在(三),如果没有看过，请观看上一章
在登录页面的时候，常常设置记住用户名和密码。虽说，可以用服务器端利用cookies进行记住密码。但最好还是在前端进行相关的记住密码。

一 利用cookie.js进行记住密码

在plugins文件夹下，放置cookie.js,和jquery.js。

二 在前端界面进行相关的引用.

	

		

			

				

						

							

								
								 
							
							

								 
							
							

								

									
								
								记住我
								登录
							
						
				
			
		
	
	
	
	
	

三 相关的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();	
	//下面是具体的登录操作
}

四. 重启服务器，进行相关的验证

关掉浏览器后，重新打开，发现可以记住用户名和密码。