document.cookie属性和用法详解

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

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

一、document.cookie 的基本概念

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

以键值对形式存储；

可设置过期时间；

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

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

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

二、document.cookie 的基本用法

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

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

该语句将输出当前页面的所有 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,01Jan202600:00:00GMT;path=/";

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

三、document.cookie 的参数详解

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

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

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

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

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

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

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

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

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

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

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

Strict：完全禁止跨站请求；

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

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

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

四、document.cookie 的读取与解析

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

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

输出示例：

username=JohnDoe;theme=dark;session=abc1234.2获取特定Cookie值的方法
functiongetCookie(name){
constcookies=document.cookie.split(";");
for(letcookieofcookies){
const[key,value]=cookie.split("=");
if(key===name){
returndecodeURIComponent(value);
}
}
returnnull;
}
console.log(getCookie("username"));//输出JohnDoe

五、document.cookie 的更新与删除

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是php小编整理的全部内容，希望对您有所帮助，更多相关资料请查看php教程栏目。