document.cookie

lichongyang

14 小时前

下面给你一份 最清晰、最实用的 document.cookie 使用说明，包括：语法、读写方式、常见坑点、安全属性（SameSite / HttpOnly / Secure）、例子等，适合前端开发快速掌握。

🍪 1. 什么是 `document.cookie`？

document.cookie 是浏览器 JavaScript 用来 读取和设置 Cookie 的接口。
它只能在当前域名（或允许的路径）下操作 Cookie。

🍪 2. 读取 Cookie

console.log(document.cookie);

返回一个 字符串，格式类似：

username=Jack; theme=dark; token=xxxx

注意：

只能读取 未加 HttpOnly 的 Cookie
HttpOnly Cookie（如登录 token）无法被 JS 读取 → 浏览器安全策略

🍪 3. 设置 Cookie（核心）

设置 cookie 的方式是向 document.cookie 写入一段 key=value 字串：

document.cookie = "username=Jack";

此操作会 添加或更新 cookie，而不会覆盖其他 cookie。

🍪 4. 设置 Cookie 的属性

你可以为 cookie 增加属性，如过期时间、路径、域名、安全属性等：

document.cookie = "username=Jack; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/; Secure; SameSite=Lax";

常用属性说明：

属性	说明
expires	GMT 时间格式，表示过期时间
max-age	指定秒数（优先级高于 expires）
path	cookie 的生效路径，如 `/`、`/admin`
domain	生效域名，如 `.example.com`
Secure	只能在 HTTPS 下传输
HttpOnly	JS 无法读写（`document.cookie` 读取不到）
SameSite	控制跨站携带策略：Lax / Strict / None

示例：设置一个 7 天过期的 cookie：

document.cookie = `theme=dark; max-age=${7 * 24 * 60 * 60}; path=/`;

🍪 5. 删除 Cookie

删除方式是：

设置 同名 Cookie
并让它过期

document.cookie = "username=; max-age=0; path=/";

⚠️ 必须保证 path/domain 与原 cookie 一致，否则可能删不掉。

🍪 6. 将 Cookie 字符串解析成对象（常用）

function getCookies() {
  return Object.fromEntries(
    document.cookie.split("; ").map(c => c.split("="))
  );
}

console.log(getCookies());

输出：

{
  username: "Jack",
  theme: "dark"
}

🍪 7. 示例：常用的 Cookie 工具封装

const Cookie = {
  set(key, value, days = 7) {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = `${key}=${value}; expires=${expires}; path=/`;
  },
  get(key) {
    return document.cookie
      .split("; ")
      .find(row => row.startsWith(key + "="))
      ?.split("=")[1];
  },
  delete(key) {
    document.cookie = `${key}=; max-age=0; path=/`;
  }
};

🍪 8. `HttpOnly` Cookie 无法通过 JS 修改

许多新手会遇到：

document.cookie 无法读取到登录 token

原因：后端设置了 HttpOnly：

Set-Cookie: token=xxxx; HttpOnly

➡️ JavaScript 无法访问，这是安全设计，用来防止 XSS 攻击。

🍪 9. 跨站 Cookie 的 SameSite 说明（Chrome 新标准）

SameSite	特点	能否跨站发送
Lax（默认）	正常情况禁止跨站发送，但导航 GET 请求可以	部分可以
Strict	最安全，完全不跨站	❌
None（必须 Secure）	可跨站，但必须 HTTPS	✔️

🍪 快速总结（浓缩版）

读取 cookie：document.cookie
设置 cookie：document.cookie = "key=value; expires=...; path=/";
删除 cookie：max-age=0
JS 无法访问带 HttpOnly 的 cookie
SameSite 决定是否允许第三方站点携带 cookie

🍪 1. 什么是 document.cookie？