当前位置：首页 > news >正文

BOM Cookie操作详解

news 2025/8/8 4:48:05

Cookie是浏览器存储数据的一种机制，主要用于存储会话信息、用户偏好设置等。下面我将详细讲解Cookie的操作方法，并提供可视化示例。

核心API与用法

1. 读取所有Cookie

// 获取当前页面所有Cookie（字符串形式）
const allCookies = document.cookie;
console.log(allCookies); 
// 输出: "name=value; name2=value2; ..."

2. 设置Cookie

// 设置一个简单的Cookie
document.cookie = "username=JohnDoe";// 设置带过期时间的Cookie（UTC时间）
document.cookie = "token=abc123; expires=Fri, 31 Dec 2025 23:59:59 GMT";// 设置带路径的Cookie
document.cookie = "preference=dark; path=/settings";// 设置带域名和Secure标志的Cookie
document.cookie = "sessionId=xyz789; domain=example.com; Secure";

3. 读取特定Cookie

function getCookie(name) {const cookies = document.cookie.split(';');for (const cookie of cookies) {const [cookieName, cookieValue] = cookie.trim().split('=');if (cookieName === name) {return decodeURIComponent(cookieValue);}}return null;
}console.log(getCookie("username")); // 输出: "JohnDoe"

4. 更新Cookie

// 更新Cookie的值（需要相同名称、路径和域名）
document.cookie = "username=JaneDoe";

5. 删除Cookie

// 通过设置过期时间为过去来删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

关键概念说明

1. Cookie的作用域

Domain: 指定哪些主机可以访问Cookie（默认为当前主机）
Path: 指定URL路径前缀（默认为当前路径）
SameSite: 控制跨站请求时Cookie的发送（Strict/Lax/None）

2. 安全属性

Secure: 只能通过HTTPS协议传输
HttpOnly: 防止XSS攻击（JavaScript无法访问）
SameSite: 防止CSRF攻击

3. 存储限制

每个域名下的Cookie数量有限（通常50个左右）
每个Cookie大小有限（通常4KB左右）
超出限制时浏览器可能删除旧Cookie或拒绝新Cookie

4. Cookie vs localStorage

特性	Cookie	localStorage
存储大小	4KB	5-10MB
过期时间	可设置	永久
自动发送	每次请求自动发送	不自动发送
访问方式	前端JS和后端均可访问	仅前端JS访问
适用场景	会话管理、用户认证	长期存储本地数据