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

我知道用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>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" id="submit" class="btn btn-primary btn-block btn-flat">登 录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>

    </div>

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

<body onLoad="document.getElementById('username').focus();GetCookie();">

表示只要页面一加载，首先将鼠标的焦点给用户名输入框，并且执行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里面去了。

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

猜你喜欢