JS前端点击记住密码之后再次登录时显示账号密码

一、前端html代码

<div>
   <label>
        <h3>账号</h3>
        <input
               type="text"
               name="loginName"
               id="loginName"
               value="${username}"
               placeholder="请输入账号"></a>
    </label>
    <label>
        <h3>密码</h3>
        <input
               type="password"
               name="password"
               id="password"
               value="${password}"
               placeholder="请输入密码">
    </label>
    <div style="">
        <label><input type="checkbox" name="remember" onclick="remember()">   记住密码</label>
    </div>
    <div class="btnBox_2">
        <a href="#" id="btn">登&nbsp;录</a>
    </div>
    </div>

二、JS代码。

$(document).ready(function(){
    //记住密码功能
    var str = getCookie("loginInfo");//从cookie中获取账号、密码信息
    str = str.substring(0,str.length);
    var username = str.split("#")[0];
    var password = str.split("#")[1];
    //自动填充用户名和密码
    $("#loginName").val(username);
    $("#password").val(password);
});
//获取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 "";
}
var remFlag = "";
//记住密码功能
function remember() {
    remFlag = $("input[type='checkbox']").is(':checked');
    if(remFlag==true){ //如果选中设置remFlag为1
        //cookie存用户名和密码,存在安全隐患
        var conFlag = confirm("确定使用记住密码功能吗！");
        if(conFlag){ //确认标志
            remFlag = "1";
        }else{
            $("input[type='checkbox']").removeAttr('checked');
            remFlag = "";
        }
    }else{ //如果没选中设置remFlag为""
        remFlag = "";
    }
};

//点击确定按钮往Controller层传送数据
$(function () {
        $(".btnBox_2").click(function () {
            var loginName = document.getElementById('loginName').value;
            var password = document.getElementById('password').value;

            if (loginName == "" || password == "") {
                return;
            }

            $.ajax({
                url: controller层方法的调用地址,
                data: {"loginName": loginName, "password": password,"remFlag":remFlag},
                type: 'post',
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {//如果返回来的信息说明提交的信息为正确的
                        var deptId = data.obj;
                        window.location.href = 完成登录需要跳转页面的url地址;//正确登录后页面跳转至
                    }else{//弹窗提醒
                        if (data.obj==1){
                            var c = dialog({
                                title: '该账号不存在！'
                            }).showModal();
                        }else if(data.obj==2){
                            var c = dialog({
                                title: '密码错误，请重新输入。'
                            }).showModal();
                        }
                    }
                }
            });
        });
    });

三、controller层代码，将用户名密码存入cookie中。（注：在业务层中）

if("1".equals(remFlag)){ //"1"表示用户勾选记住密码
    String loginInfo = loginName+"#"+password;
    Cookie userCookie=new Cookie("loginInfo",loginInfo);

    userCookie.setMaxAge(30*24*60*60);   //存活期为一个月 30*24*60*60
    userCookie.setPath("/");
    response.addCookie(userCookie);
}

四、取消记住密码：删除cookie

Cookie cookie = new Cookie("loginInfo","");
cookie.setMaxAge(0); //设置立即删除
cookie.setPath("/");
response.addCookie(cookie);