JavaScript实现记住密码，采用cookie技术

朱雀 2022-03-16 09:18 250阅读 0赞

我知道用cookie保存密码，容易造成密码的安全问题，但是我这只是自己写的小项目，权当练手了。

话不多说，直接上代码。

HTML代码如下：

<div class="login-box-body">
            <p class="login-box-msg">Please enter your Account.</p>
    
            <form action="" method="post">
                <div class="form-group has-feedback">
                    <input type="text" name="username" id="username" autocomplete="off" class="form-control" placeholder="请输入学号">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <p id="error-msg"></p>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" id="remember_password"> 记住密码
                            </label>
                        </div>
                    </div>
                    
                    <div class="col-xs-4">
                        <button type="submit" id="submit" class="btn btn-primary btn-block btn-flat">登 录</button>
                    </div>
                    
                </div>
            </form>
    
        </div>

不要忘了在body里加上如下代码：

表示只要页面一加载，首先将鼠标的焦点给用户名输入框，并且执行GetCookie（）函数。。。

最后加上JS代码：

$("#submit").click(function () {
            console.log("$(input[name='username']).val()", $("input[name='username']").val());
            console.log("$(input[name='username']).val()", $("input[name='password']").val());
            if (checkLogin()) {
                $.ajax({
                    type: "POST",
                    url: _ctx + "/login",
                    data: {
                        username: $("input[name='username']").val(),
                        password: $("input[name='password']").val(),
                        time: new Date().getTime()
                    },
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        if ("success" == data.status) {
                            window.location.href = _ctx + "/index";
                        } else {
                            $("#error-msg").html(data.msg);
                        }
                    }
                })
            }
            return false;
        });
    
        function checkLogin() {
            if ($("input[name='username']").val() == "") {
                alert("username cannot be empty")
                $("input[name='username']").focus();
                return false;
            }
            if ($("input[name='password']").val() == "") {
                alert("password cannot be empty")
                $("input[name='password']").focus();
                return false;
            }
            else {
                saveInfo();
                return true;
            }
        }
        saveInfo = function () {
            try {
                var isSave = document.getElementById('remember_password').checked;   //保存按键是否选中
                if (isSave) {
                    var username = document.getElementById('username').value;
                    var password = document.getElementById('password').value;
                    if (username != "" && password != "") {
                        SetCookie(username, password);
                    }
                } else {
                    SetCookie("", "");
                }
            } catch (e) {
    
            }
        }
    
        function SetCookie(username, password) {
            var Then = new Date();
            Then.setTime(Then.getTime() + 1866240000000);
            document.cookie = "username=" + username + "%%" + password + ";expires=" + Then.toGMTString();
        }
    
        function GetCookie() {
            var nmpsd;
            var nm;
            var psd;
            var cookieString = new String(document.cookie);
            var cookieHeader = "username=";
            var beginPosition = cookieString.indexOf(cookieHeader);
            cookieString = cookieString.substring(beginPosition);
            var ends = cookieString.indexOf(";");
            if (ends != -1) {
                cookieString = cookieString.substring(0, ends);
            }
            if (beginPosition > -1) {
                nmpsd = cookieString.substring(cookieHeader.length);
                if (nmpsd != "") {
                    beginPosition = nmpsd.indexOf("%%");
                    nm = nmpsd.substring(0, beginPosition);
                    psd = nmpsd.substring(beginPosition + 2);
                    document.getElementById('username').value = nm;
                    document.getElementById('password').value = psd;
                    if (nm != "" && psd != "") {
                        // document.forms[0].checkbox.checked = true;
                        document.getElementById('remember_password').checked = true;
                    }
                }
            }
        }

到此，我们采用cookie技术用JavaScript实现记住密码就完成了，最后我们可以用chrome浏览器的开发者工具看到，我们的用户名和密码已经保存到cookies里面去了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzMxNzEz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzMxNzEz_size_16_color_FFFFFF_t_70]: /images/20220316/c500cf56dd9e4a76a6e93676d30e1593.png