记住密码

简单描述：登录的时候，记住密码，看似不起眼，但是实现起来的时候，还是有点东西的。

代码：

//html代码 复选框和记住密码
<div style="float:right;padding-right:10%;">
    <div style="float: left;">
        <input name="form-field-checkbox" id="saveid" type="checkbox" onclick="savePaw();" style="padding-top:0px;" />
    </div>
    <div style="float: left;margin-top:3px;margin-right:2px;">
        <span style='color:#fff'>记住密码</span>
    </div>
</div> 

//js代码  showfh()忽略，这个是关闭屏幕晃动提示的
<script type="text/javascript">
    //服务器校验  登录
    function severCheck(){
        debugger;
        if(check()){
            var loginName = $("#loginname").val();
            var password = $("#password").val();
            var code = loginName+",oh,"+password+",oh,"+$("#code").val();
            $.ajax({
                type: "POST",
                url: 'login_login',
                data: {keyData:code,tm:new Date().getTime()},
                dataType:'json',
                cache: false,
                success: function(data){
                    debugger;
                    if("success" == data.result){
                        saveCookie();
                        window.location.href="main/index";
                    }else if("usererror" == data.result){
                        $("#loginname").tips({
                            side : 1,
                            msg : "用户名或密码有误",
                            bg : '#FF5080',
                            time : 15
                        });
                        showfh();
                        $("#loginname").focus();
                        return false;
                    }else if("codeerror" == data.result){
                        $("#code").tips({
                            side : 1,
                            msg : "验证码输入有误",
                            bg : '#FF5080',
                            time : 15
                        });
                        showfh();
                        $("#code").focus();
                        return false;
                    }else{
                        $("#loginname").tips({
                            side : 1,
                            msg : "缺少参数",
                            bg : '#FF5080',
                            time : 15
                        });
                        showfh();
                        $("#loginname").focus();
                        return false;
                    }
                }
            });
        }
    }

    $(function(){
        changeCode1();
        $("#codeImg").bind("click", changeCode1);
        // $("#zcodeImg").bind("click", changeCode2);
    });

    function changeCode1() {
        $("#codeImg").attr("src", "code/kaptcha?t=" + genTimestamp());
    }
    function changeCode2() {
        $("#zcodeImg").attr("src", "code/kaptcha?t=" + genTimestamp());
    }

    //键盘回车事件，执行登录
    $(document).keyup(function(event) {
        if (event.keyCode == 13) {
            $("#to-recover").trigger("click");
        }
    });
    //客户端校验
    function check() {
        if ($("#loginname").val() == "") {
            $("#loginname").tips({
                side : 2,
                msg : '用户名不得为空',
                bg : '#AE81FF',
                time : 3
            });
            showfh();
            $("#loginname").focus();
            return false;
        } else {
            $("#loginname").val($.trim($('#loginname').val()));
        }
        if ($("#password").val() == "") {
            $("#password").tips({
                side : 2,
                msg : '密码不得为空',
                bg : '#AE81FF',
                time : 3
            });
            showfh();
            $("#password").focus();
            return false;
        }
        if ($("#code").val() == "") {
            $("#code").tips({
                side : 1,
                msg : '验证码不得为空',
                bg : '#AE81FF',
                time : 3
            });
            showfh();
            $("#code").focus();
            return false;
        }
        $("#loginbox").tips({
            side : 1,
            msg : '正在登录 , 请稍后 ...',
            bg : '#68B500',
            time : 10
        });
        return true;
    }

    //生成时间戳
    function genTimestamp() {
        var time = new Date();
        return time.getTime();
    }
    function savePaw() {
        if (!$("#saveid").attr("checked")) {
            $.cookie("loginname", '', {
                expires : -1
            });
            $.cookie("password", '', {
                expires : -1
            });
            $.cookie("checked", '', {
                expires : -1
            });
            $("#checked").val('');
            $("#loginname").val('');
            $("#password").val('');
        }
    }

    function saveCookie() {
        if ($("#saveid").attr("checked")) {
            $.cookie("loginname", $("#loginname").val(), {
                //设置的有效时间为3600天
                expires :3600
            });
            $.cookie("password", $.base64.encode($("#password").val()), {
                expires : 3600
            });
            $.cookie("checked",$("#saveid").attr("checked"),{
                expires : 3600
            })
        }
    }
    //获取cookie中的值
    $(function () {
        var checked = $.cookie("checked");
        if(checked){
            $("#saveid").attr("checked","true");
            var loginname = $.cookie("loginname");
            var password = $.base64.decode($.cookie("password"));
            $("#loginname").val(loginname);
            $("#password").val(password);
        }
    })
</script>


<script th:src="@{login/js/bootstrap.min.js}" src="../static/login/js/bootstrap.min.js"></script>
<script th:src="@{js/jquery-1.7.2.js}" src="../static/js/jquery-1.7.2.js"></script>
<script th:src="@{login/js/jquery.easing.1.3.js}" src="../static/login/js/jquery.easing.1.3.js"></script>
<script th:src="@{login/js/jquery.mobile.customized.min.js}" src="../static/login/js/jquery.mobile.customized.min.js"></script>
<script th:src="@{login/js/camera.min.js}" src="../static/login/js/camera.min.js"></script>
<script th:src="@{login/js/templatemo_script.js}" src="../static/login/js/templatemo_script.js"></script>
<script th:src="@{login/js/ban.js}" src="../static/login/js/ban.js"></script>
<script type="text/javascript" th:src="@{js/jquery.base64.js}" src="../static/js/jQuery.md5.js"></script>
<script type="text/javascript" th:src="@{js/jQuery.md5.js}" src="../static/js/jQuery.md5.js"></script>
<script type="text/javascript" th:src="@{js/jquery.tips.js}" src="../static/js/jquery.tips.js"></script>
<script type="text/javascript" th:src="@{js/jquery.cookie.js}" src="../static/js/jquery.cookie.js"></script>

 总结：参考链接https://www.cnblogs.com/a757956132/p/5466430.html