在 Web 开发中，浏览器提供了多种客户端存储机制，如 localStorage、sessionStorage、IndexedDB 等。而 document.cookie 是最早被引入的一种客户端存储方式，虽然它在现代开发中逐渐被更现代的 API 替代，但由于其兼容性好、使用简单，仍然在许多项目中被广泛使用，尤其是在需要与服务器端交互的场景下。

本文将围绕 document.cookie 的基本概念、使用方式、语法结构、读写操作、安全性控制以及典型应用场景进行详细讲解，帮助开发者全面掌握这一基础但重要的 Web API。

一、document.cookie 的基本概念

document.cookie 是 JavaScript 提供的一个接口，用于读取、创建、修改和删除浏览器中的 Cookie。Cookie 是服务器存储在用户浏览器中的小型文本数据，每次请求服务器时，浏览器都会将 Cookie 自动附加到请求头中，从而实现状态跟踪、用户认证等功能。

1. Cookie 的基本特点

以键值对形式存储；

可设置过期时间；

可指定作用域（域名、路径）；

每个 Cookie 有大小限制（通常为 4KB）；

浏览器对每个域名下的 Cookie 数量也有上限（一般为 20 个）。

二、document.cookie 的基本用法

1. 读取 Cookie

通过 document.cookie 可以获取当前页面的所有 Cookie，返回值是一个字符串，格式为：

key1=value1; key2=value2; key3=value3console.log(document.cookie);

该语句将输出当前页面的所有 Cookie 信息。

1. 写入 Cookie

设置 Cookie 的语法如下：

document.cookie = "key=value; expires=expiration_time; path=path; domain=domain; secure; samesite=value";

其中，key=value 是必须的，其他参数是可选的。

示例：设置一个简单的 Cookie

document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 2026 00:00:00 GMT; path=/";

这条语句将在浏览器中创建一个名为 username 的 Cookie，值为 JohnDoe，过期时间为 2026 年 1 月 1 日，并且该 Cookie 在整个网站路径 / 下都有效。

三、document.cookie 的参数详解

1.  expires / max-age：设置过期时间

expires：指定一个具体的过期时间（GMT 格式）；

max-age：以秒为单位设置 Cookie 的存活时间。

如果不设置这两个参数，Cookie 将成为“会话 Cookie”，浏览器关闭后自动删除。

document.cookie = "token=abc123; max-age=3600"; // 1小时后过期

1. path：指定 Cookie 的作用路径
   

默认路径是当前页面路径，但可以指定更广泛的路径，如 /，表示整个网站都可以访问该 Cookie。

document.cookie = "theme=dark; path=/";

1. domain：指定 Cookie 的作用域名
   

默认为当前域名，可以设置为父域名，以便多个子域名共享 Cookie。

document.cookie = "session=xyz; domain=.example.com";

1. secure：仅通过 HTTPS 传输
   

设置该参数后，Cookie 只能通过 HTTPS 协议发送，有助于提升安全性。

document.cookie = "secureToken=123; secure";

1. samesite：控制跨站请求行为
   

用于防止跨站请求伪造（CSRF）攻击，可选值包括：

Strict：完全禁止跨站请求；

Lax：允许部分安全的跨站请求（如导航）；

None：允许跨站请求（需配合 secure 使用）。

document.cookie = "auth=abc; samesite=strict";

四、document.cookie 的读取与解析

由于 document.cookie 返回的是一个字符串，开发者需要手动解析字符串来获取特定 Cookie 的值。

1. 基本读取方式

const cookies = document.cookie;
console.log(cookies);

输出示例：

username=JohnDoe; theme=dark; session=abc1234.2 获取特定 Cookie 值的方法
function getCookie(name) {
    const cookies = document.cookie.split("; ");
    for (let cookie of cookies) {
        const [key, value] = cookie.split("=");
        if (key === name) {
            return decodeURIComponent(value);
        }
    }
    return null;
}
console.log(getCookie("username")); // 输出 JohnDoe

五、document.cookie 的更新与删除

1. 更新 Cookie

要更新一个 Cookie，只需重新设置相同名称的 Cookie 即可。

document.cookie = "username=JaneDoe; path=/";

1. 删除 Cookie
   

删除 Cookie 的方式是将它的 expires 设置为过去的时间。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

注意：删除 Cookie 时，必须使用与设置时相同的 path 和 domain，否则可能无法删除成功。

六、document.cookie 的安全性与注意事项

1. 安全性建议

避免存储敏感信息：如密码、身份证号等；

启用 Secure 和 HttpOnly 标志：防止 Cookie 被窃取；

限制作用域：通过 path 和 domain 控制 Cookie 的使用范围；

启用 SameSite 属性：防止 CSRF 攻击。

1. 与服务器端的交互

Cookie 通常由服务器端设置，例如通过 HTTP 响应头：

Set-Cookie: session=abc123; Path=/; HttpOnly;

SecureJavaScript 无法读取带有 HttpOnly 标志的 Cookie，这是浏览器的安全机制之一。

document.cookie 是浏览器提供的一种基础但功能强大的客户端存储机制，虽然它在现代 Web 开发中已逐渐被 localStorage 和 sessionStorage 所取代，但在需要与服务器端进行状态同步、用户认证、跨页面通信等场景中，仍然具有不可替代的作用。

声明：所有来源为“澳门太阳集团城网址8722”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com