获取浏览器 Cookie - Javascript

在前端开发中，获取浏览器 Cookie 是一个常见的需求。Cookie 是存储在浏览器中的小文本文件，用于跟踪用户活动、认证用户身份等。

获取 Cookie

要获取浏览器中的 Cookie，可以使用 document.cookie 属性。这个属性返回当前文档中的所有 Cookie 信息。

const cookies = document.cookie;
console.log(cookies); // "name=value; name2=value2; ..."

可以看到，document.cookie 返回的是一个字符串，格式为 name=value，Cookie 之间使用分号和空格分隔。

解析 Cookie

获取到 Cookie 信息后，还需要对其进行解析才能得到所需的数据。可以自己编写解析函数，也可以使用现有的工具库。

下面是一个简单的解析函数：

function parseCookies() {
  const cookies = document.cookie;
  const result = {};
  cookies.split("; ").forEach(cookie => {
    const [name, value] = cookie.split("=");
    result[name] = value;
  });
  return result;
}

const cookieObj = parseCookies();
console.log(cookieObj);
/*
{
  name: "value",
  name2: "value2",
  ...
}
*/

这个函数将 document.cookie 返回的字符串解析为一个 key-value 对象，其中 Cookie 的名称作为键，Cookie 的值作为值。

设置 Cookie

除了获取 Cookie，还可以在 JavaScript 中设置 Cookie。可以使用 document.cookie 属性来实现，通过赋值一个字符串来设置一条 Cookie。

document.cookie = "name=value; expires=Thu, 01 Jan 2030 00:00:00 UTC; path=/";

看一下这个语句的每个部分：

• name=value 是 Cookie 的名称和值。在这里，名称为 name，值为 value。
• expires 属性指定了 Cookie 的过期时间。在这里，过期时间是 2030 年 1 月 1 日。
• path 属性指定了 Cookie 所在的目录。在这里，Cookie 会在整个网站都可用。

总结

本文介绍了如何获取浏览器中的 Cookie、如何解析 Cookie 信息以及如何设置 Cookie。要注意的是，Cookie 存在一些安全问题，例如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。在开发过程中需要注意这些问题，并采取相应的防御措施。