静态页面利用JS读取cookies记住用户信息

2023年6月11日上午9:10 • JavaScript

静态页面读取cookie的基本原理

在使用JavaScript读取cookie之前，我们需要先了解什么是cookie。Cookie是指客户端保存在浏览器中的一小段文本数据，由Web服务器生成并存储在用户计算机上，当下次用户访问相同的站点时，服务器可读取此cookie的值，来判断用户是否合法，以及是否登录过等。

读取cookie需要使用JavaScript中的document.cookie属性。该属性可以返回当前网页保存的所有cookie，以字符串的形式表示。cookie通常是由名称、值、过期时间、路径和域等多个字段构成的。为了方便读取cookie，我们可以自定义一个函数来实现字符串转换为json格式的cookie，以便更方便的进行读取：

function cookieToJSON () {
    var cookies = document.cookie.split(';');
    var cookieJSON = {};
    for (var i = 0; i < cookies.length; i++) {
        var parts = cookies[i].split('=');
        cookieJSON[parts.shift().trim()] = decodeURI(parts.join('='));
    }
    return cookieJSON;
}

上述代码中，document.cookie.split(";")会把所有的分号拆开，在经过循环遍历后将一个个的cookie用等号分成数组，根据数组索引的位置，将去掉首位空格的name作为cookie的键，将值解码为字符串后作为cookie的值，最后组装成一个json格式返回。

利用JS读取cookie并记住用户信息的示例

（1）用户登录页面

在用户登录页面，通常需要用户输入用户名和密码，然后将这些信息提交到后台进行验证，验证通过后再存储用户信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录页面</title>
    </head>
    <body>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username">
            <br>
            <label for="password">密码：</label>
            <input type="password" id="password">
            <br>
            <button type="button" onclick="login()">登录</button>
        </form>
        <script>
            function login() {
                // 根据用户输入的用户名和密码进行验证，如验证通过则存储cookie
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if (username === 'admin' && password === '123456') {
                    var user = {
                        username: username,
                        timestamp: new Date().getTime() // 记录当前时间戳，用于判断是否过期
                    };
                    document.cookie = "user=" + encodeURIComponent(JSON.stringify(user)) // 存储cookie
                    alert('登录成功');
                    window.location.href = 'index.html'; // 跳转到主页
                } else {
                    alert('用户名或密码错误');
                }
            }
        </script>
    </body>
</html>

上述代码中，用户输入用户名和密码后，点击登录按钮时，调用login函数进行验证。如果验证通过，则生成一个名为user的cookie，并将用户信息存储为json格式。然后通过window.location.href将页面跳转到主页index.html。

（2）首页读取cookie并显示用户信息

在首页中，我们可以通过JS读取cookie，判断用户是否已经登录，并将用户信息显示出来。如果用户已经登录，则可以直接显示用户信息，否则显示登录按钮，引导用户进行登录。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
    </head>
    <body>
        <div id="user-info"></div>
        <div id="login-btn"></div>
        <script>
            // 读取cookie并显示用户信息
            var cookieJSON = cookieToJSON();
            if (cookieJSON.user) {
                var user = JSON.parse(cookieJSON.user);
                if (new Date().getTime() - user.timestamp > 3600 * 1000) { // 判断登录是否过期
                    document.cookie = "user=;expires=Thu, 01 Jan 1970 00:00:01 GMT"; // 登录已过期，清除cookie
                } else {
                    var loginStr = user.username + '，欢迎回来！';
                    document.getElementById('user-info').innerHTML = loginStr;
                    document.getElementById('login-btn').innerHTML = '<button onclick="logout()">退出登录</button>';
                }
            } else {
                document.getElementById('login-btn').innerHTML = '<button onclick="window.location.href=\'login.html\'">登录</button>';
            }

            // 退出登录
            function logout() {
                document.cookie = "user=;expires=Thu,01 Jan 1970 00:00:01 GMT"; // 清除cookie
                alert('退出登录成功');
                window.location.reload(); // 刷新页面
            }
        </script>
    </body>
</html>

上述代码中，通过调用cookieToJSON函数读取当前网站的cookie，并判断是否存在名为user的cookie。如果存在，则表示用户已经登录，将用户名和欢迎语显示出来，并显示退出登录按钮；如果不存在，则显示登录按钮，引导用户进行登录。当用户点击退出登录按钮时，调用logout函数，将已登录的cookie清除，并刷新页面即可。

值得注意的是，在存储cookie时，我们没有将过期时间设为10年或更长的时间，而是只设置到了1个小时，因为长时间的cookie不仅存在安全隐患，而且可能会影响用户的体验。当然，这个时间可以根据实际情况进行修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：静态页面利用JS读取cookies记住用户信息 - Python技术站