登录界面如何实现记住用户名和密码 且实现自动登录

最近在一次练习中遇到了一个问题，如何在登录界面实现记住用户名和密码，并且可以进行勾选是否自动登录。

 

首先，给大家看下我的登陆界面。

 

 

很显然，我布置了checkbox，一个用于记住密码，一个用于自动登录。

<label>
<input type="checkbox" name="autoLogin" id = "autoLogin"> 自动登录
</label>

<label>
<input type="checkbox" name="rememberMe" id = "rememberMe"> 记住密码
</label>

 

接下来就是如何对这两个按钮进行触发操作了，我主要是利用了jquery.cookie.js来进行的操作。这个需要自己去下载，然后引进。

 

 

        //记住用户名密码
        function Save() {
            if ($("#rememberMe").prop("checked")) {
                var str_username = $("#NameText").val();//用户名
                var str_password = $("#inputPassword").val();//密码
                $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie
                $.cookie("username", str_username, { expires: 7 });
                $.cookie("password", str_password, { expires: 7 });
            }
            else {
                $.cookie("rmbUser", "false", { expire: -1 });
                $.cookie("username", "", { expires: -1 });
                $.cookie("password", "", { expires: -1 });
            }

            if ($("#autoLogin").prop("checked")) {
                var str_username = $("#NameText").val();
                var str_password = $("#inputPassword").val();
                $.cookie("auto", "true", { expires: 7 }); //存储一个带7天期限的cookie
                $.cookie("username", str_username, { expires: 7 });
                $.cookie("password", str_password, { expires: 7 });
            }
            else {
                $.cookie("auto", "false", { expire: -1 });
                $.cookie("username", "", { expires: -1 });
                $.cookie("password", "", { expires: -1 });
            }
        };

通过上面代码的操作就可以进行判断，是否勾选了记住密码和自动登录的按钮，然后便将这个记录到cookie中，cookie的寿命为7天，关于如何触发这个save：在button上设置一个onclick，调用save函数，便可以在实现登陆的时候触发。

这样便把用户的相关信息存入了浏览器中，接下来就是如何在下一次点开登陆界面的时候自动填充数据。

$(document).ready(function () {
            $("#autoLogin").change(function() {
                if($("#autoLogin").prop("checked")){
                    $.cookie("auto", "true", { expires: 7 });
                }else{
                    $.cookie("auto", "false", { expires: 7 });
                }
            });

            if ($.cookie("rmbUser") == "true") {
                $("#rememberMe").attr("checked", true);
                $("#NameText").val($.cookie("username"));
                $("#inputPassword").val($.cookie("password"));
            }

            if ($.cookie("auto") == "true") {
                setTimeout(function(){
                    if($.cookie("auto") == "true")
                    window.location.href='下一个界面';
                },5000);
            }
};

首先在页面加载的一开始我便进行了判断，如果cookie中记录了记住我和自动登录，那么便自动填充数据，我在下面嗨加入了一些判断，如果是自动登录，用户会等待五秒钟，若是在等待过程中用户取消了勾选自动登录，那么监听器便接收到，从而改变状态，不会进入下一个界面。

 

这只是写的一个简单的记住密码和自动登陆，与后台数据库进行交互，进而判断的部分没有进行展示。