document.cookie 受同源策略和 Cookie 属性双重限制：无法跨域读取、HttpOnly Cookie 不可被 JS 读取；Secure Cookie 在 HTTP 页面中设置会被丢弃；SameSite 影响跨站发送；写入不支持删除或修改属性，读取需手动解析。
直接读写 document.cookie 有啥限制？
浏览器对 document.cookie 的读写是受同源策略和 Cookie 属性双重约束的。你不能跨域读取其他站点的 Cookie，也不能通过 JS 读取设置了 HttpOnly 标志的 Cookie —— 这类 Cookie 只能由服务端在响应头中设置、由浏览器自动携带，JS 调用 document.cookie 时完全看不见它。
写入时也受限：如果当前页面协议是 http://，却尝试设置 Secure 属性，该 Cookie 会被浏览器静默丢弃；同样，SameSite=Strict 或 SameSite=Lax 在某些跨站请求场景下会阻止发送。
-
document.cookie = "a=1"只会新增或覆盖同名 Cookie，无法删除或修改已有属性（如过期时间、路径） - 读取
document.cookie返回的是字符串，格式为"a=1; b=2; c=3"，需手动解析，没有内置 API 解析 - 所有写入操作都必须拼接完整属性字符串，漏掉
Path=/可能导致后续读不到（默认路径是当前路径，不是根路径）
如何安全地封装一个 Cookie 操作函数？
原生操作太脆弱，建议封装最小可用的 setCookie 和 getCookie，重点处理编码、路径、作用域和安全属性：
function setCookie(name, value, options = {}) {
const { expires, path = '/', domain, secure, sameSite = 'Lax', httpOnly } = options;
let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires instanceof Date) cookieStr += `; Expires=${expires.toUTCString()}`;
if (path) cookieStr += `; Path=${path}`;
if (domain) cookieStr += `; Domain=${domain}`;
if (secure) cookieStr += '; Secure';
if (sameSite) cookieStr += `; SameSite=${sameSite}`;
// 注意：httpOnly 是响应头字段，JS 无法设置，这里仅作提醒，不参与拼接
document.cookie = cookieStr;
}
<p>function getCookie(name) {
const cookies = document.cookie.split('; ').reduce((acc, pair) => {
const [k, v] = pair.split('=');
acc[decodeURIComponent(k)] = decodeURIComponent(v);
return acc;
}, {});
return cookies[name];
}关键点：
立即学习“Java免费学习笔记（深入）”；
- 始终对
name和value做encodeURIComponent，否则含空格、分号、等号会破坏格式 -
Path=/必须显式指定，否则默认是当前 URL 路径（比如/admin/user），导致首页读不到 -
SameSite=Lax是当前推荐值，能兼顾 CSRF 防护与大部分正常跳转场景；Strict过于严格，用户从外部链接进站时可能丢失登录态
Secure 和 HttpOnly 到底谁管什么？
这两个属性常被混淆，但职责完全不同：
-
Secure：只允许 Cookie 通过 HTTPS 协议传输。JS 写入时若当前是 HTTP 页面，加了Secure会被忽略；服务端 Set-Cookie 响应头中加了，则浏览器只在 HTTPS 请求中带上它 -
HttpOnly：纯服务端控制字段，JS 完全无法访问。它防的是 XSS 后的 Cookie 窃取，比如攻击者注入<script>alert(document.cookie)</script>，有HttpOnly的 Cookie 就不会出现在document.cookie字符串里 - 二者可共存：
Set-Cookie: sessionid=abc123; HttpOnly; Secure; SameSite=Lax
注意：前端 JS 设置 Cookie 时，HttpOnly 字段会被浏览器直接忽略——它只能由服务端在响应头中声明。
为什么你设的 Cookie 明明写了 Expires 却还是会话级？
常见错误是把时间戳当日期对象传给 Expires：
- ❌ 错误：
expires: Date.now() + 24 * 60 * 60 * 1000（这是毫秒数，不是 Date 对象） - ✅ 正确：
expires: new Date(Date.now() + 24 * 60 * 60 * 1000) - 更稳妥写法是用
Max-Age（单位秒），它比Expires更可靠，不受客户端时间偏差影响，但 JS 无法通过document.cookie设置Max-Age，只能靠服务端响应头
另一个坑：Chrome 94+ 对第三方 Cookie 加强限制，默认开启 SameSite=Lax，如果你的 Cookie 是嵌在 iframe 或跨站表单提交中使用的，很可能根本发不出去——这时得确认是否真需要跨站共享，否则优先改用后端透传或 Storage API 配合 postMessage。
真正容易被忽略的，是开发环境混用 localhost 和 127.0.0.1：它们被视为不同域名，带 Domain 属性的 Cookie 在其中一个下设了，在另一个下就读不到。调试时统一用 localhost，别来回切。
