js 获取cookies|极客笔记

js 获取cookies

在Web开发中，我们经常会使用cookies来存储用户的会话信息或其他数据，以实现登录状态的保持、记住用户的偏好设置等功能。在前端开发中，我们有时候需要获取cookies中保存的数据，以便进行相应的操作。本文将详细介绍如何使用JavaScript来获取cookies。

什么是cookies

Cookies是在用户访问网站时，网站通过浏览器在用户设备上存储的信息片段。Cookies通常包含了一些关于用户和网站的信息，用于记录用户的偏好、会话信息等。通过cookies，网站可以实现一些功能，比如保持用户登录状态、记住用户的购物车内容等。

如何设置cookies

在JavaScript中，可以通过document.cookie来设置和获取cookies。例如，我们可以通过以下代码来设置一个名为username，值为Alice的cookies：

document.cookie = "username=Alice";

同样，我们也可以设置一个包含多个键值对的cookies：

document.cookie = "username=Alice; password=123456; role=admin";

获取cookies

在JavaScript中获取cookies的方法有很多种，下面我们将介绍两种常用的方法：

方法一：使用`document.cookie`

通过访问document.cookie可以获取当前页面的所有cookies信息，但是返回的是一个字符串，需要进行解析才能获取具体的某个cookie值。以下是一个简单的示例代码来获取特定cookie的值：

function getCookie(name) {
    var cookies = document.cookie.split('; '); // 使用分号和空格分割cookies
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].split('='); // 使用等号分割键值对
        if (cookie[0] === name) {
            return cookie[1]; // 返回对应的值
        }
    }
    return ''; // 若没有找到对应cookie，返回空字符串
}

var username = getCookie('username');
console.log(username); // 输出Alice

方法二：使用正则表达式

另一种获取cookies的方法是使用正则表达式来匹配特定的cookie。以下是一个示例代码：

function getCookieValue(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    if (match) {
        return match[2]; // 返回cookie的值
    }
    return ''; // 若没有找到对应cookie，返回空字符串
}

var password = getCookieValue('password');
console.log(password); // 输出123456

示例代码

下面是一个完整的示例代码，演示了如何使用JavaScript来获取cookies中保存的信息：

<!DOCTYPE html>
<html>
<head>
    <title>Get Cookies</title>
</head>
<body>
    <script>
        function getCookieValue(name) {
            var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
            if (match) {
                return match[2];
            }
            return '';
        }

        var username = getCookieValue('username');
        var password = getCookieValue('password');

        console.log('Username: ' + username);
        console.log('Password: ' + password);
    </script>
</body>
</html>

假设我们之前设置了username=Alice; password=123456的cookies，上面的示例代码将会输出：