利用 cookie，实现在html页面记住我功能

红太狼 2022-02-20 15:32 587阅读 0赞

场景：

在平时，我们经常可以在页面中看到记住我的功能，如下图示例，在客户端保存用户输入的登录信息，在我们设定的过期时间内，用户再次访问当前页面时，无需重复输入账号密码信息，方便用户下次进行登录操作，一下例子即为实现该功能记录。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70][]

实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面记住我功能Demo</title>
    </head>
    <body>
    <div style="margin: 18% 43%;text-align: center;">
        <p>
            <span>账号:</span>
            <input type="text" id="account">
        </p>
        <p>
            <span>密码:</span>
            <input type="password" id="pwd">
        </p>
        <p>
            <input type="checkbox" id="rememberMe">
            <span style="vertical-align: middle">记住我</span>
        </p>
        <br>
        <br>
        <p>
            <input type="button" id="loginBtn" value="登录">
        </p>
    
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
    </body>
    <script>
        $(function () {
    
            initView();
    
            $("#loginBtn").click(function () {
                if ($("#rememberMe").is(":checked")) {
                    setCookie("cookie_account", $("#account").val());
                    setCookie("cookie_password", $("#pwd").val());
                    setCookie("rememberMe", true);
                } else {
                    delCookie("cookie_account");
                    delCookie("cookie_password");
                    delCookie("rememberMe");
                }
    
    
                window.location.reload()
            });
        });
    
        function initView() {
            if (getCookie("cookie_account")) {
                $("#account").val(getCookie("cookie_account"));
            }
            if (getCookie("cookie_password")) {
                $("#pwd").val(getCookie("cookie_password"));
            }
            if (getCookie("rememberMe")) {
                $("#rememberMe").attr("checked", getCookie("rememberMe"));
            }
            $("#account").focus(function () {
                this.select();
            });
            $("#pwd").focus(function () {
                this.select();
            });
        }
    
        /**
         * 写入cookie
         * @param name  cookie 名
         * @param value  cookie 值
         */
        function setCookie(name, value) {
            var Days = 30; //此 cookie 将被保存 30 天
            var exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        }
        /**
         * 删除cookie
         * @param name
         */
        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
        /**
         * 读取cookie
         * @param name
         * @returns
         */
        function getCookie(name) {
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null)
                return unescape(arr[2]);
            return null;
        }
    
    
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70]: /images/20220220/1fcd1aada0544d60b8fe3f080f1a6976.png