第一步在密码框下面加上记住密码选择框

<li>
	<label for="rememberme">
		<input name="rememberme" type="checkbox" id="rememberme" value="1" checked /> 记住密码
	</label>
</li>

我是ajax方式而不是form表单，所以需要手动加上rememberme参数，并且要传递checked属性。

function login() {
    var account = $("input[name='account']").val();
    var password = $("input[name='password']").val();
    var rememberme = $("input[name='rememberme']").get(0).checked;
    $.ajax({
        type: "post",
        url: "/login",
        data: {
            "account": account,
            "password": password,
            "rememberme": rememberme
        },
	......

第二步在controller的方法中添加cookie

//添加cookie
if (rememberme.equals("true")) {
	//创建两个Cookie对象
	Cookie nameCookie = new Cookie("account", account);
	//设置Cookie的有效期为3天
	nameCookie.setMaxAge(60 * 60 * 24 * 3);
	Cookie pwdCookie = new Cookie("password", password);
	pwdCookie.setMaxAge(60 * 60 * 24 * 3);
	response.addCookie(nameCookie);
	response.addCookie(pwdCookie);
}

上面代码中给response添加了账号密码两个cookie。

第三步显示账号密码

当我们登录后又退出时，cookie还存储着账号密码，就可以把账号密码显示到输入框，达到记住密码的效果。

使用js来获取cookie

//获取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

调用上述js来填充输入框

$(function () {
    //记住密码功能
    var account = getCookie("account");
    var password = getCookie("password");
    //自动填充用户名和密码
    $("input[name='account']").val(account)
    $("input[name='password']").val(password)
});

第四步取消勾选记住密码后清除cookie

js方法定义

//设置cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

// 删除cookie
function clearCookie(name) {
    setCookie(name, "", -1);
}

登录时候判断是否勾选，没勾选的话就清除

var account = $("input[name='account']").val();
var password = $("input[name='password']").val();
var rememberme = $("input[name='rememberme']").get(0).checked;
if (! rememberme) {
	clearCookie("account");
	clearCookie("password");
}