一、问题背景与误区
常见导致 Cookie 过期时间不生效的场景
在前端开发中，最容易忽略的细节之一是 过期时间的格式与单位。如果使用 expires 字段，但是给出的日期不是 UTC/GMT 时间格式，浏览器可能会忽略该值，从而导致“过期时间无效”的现象。
另一个常见误区是把过期时间写成本地时间字符串，例如 +08:00 的本地时区，而浏览器需要的是 UTC 时间 的字符串表示，常见的错误包括使用 Date.toString() 或 Date.toLocaleString() 的输出。
此外，使用 max-age 时需明确 单位为秒，而不是毫秒。很多人习惯性把毫秒传给 max-age，从而导致实际有效时间远小于期望，甚至为 0 或负数。
// 常见错误示例：使用本地时间字符串
const d = new Date();
d.setTime(d.getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = "user=alice; expires=" + d.toString() + "; path=/"; // 可能无效
浏览器行为与同源策略影响
除了时间格式，浏览器对 Cookie 的存放还受许多策略影响。SameSite 属性会决定跨站请求时 Cookie 的是否携带，对于跨域请求导致的“无效或丢失”的情况，需要正确设置 SameSite=None 与 Secure。
另外，若服务器端返回了 HttpOnly 属性，那么该 Cookie 将不可通过 document.cookie 读取，但仍然可以被浏览器在 HTTP 请求中发送。请注意：通过 JavaScript 设置 HttpOnly 的 Cookie 是不可行的，只能由服务器端设置。
还有一个常见问题是同一名称的 Cookie 在不同的域名或者子域名下会形成不同的“主机范围”副本。没有设置 domain 时，Cookie 为主机限定 Cookie，只对当前域名可见；若设置了 domain，需确保范围覆盖目标子域名。
// 仅作示意：如果未指定 domain，cookie 仅限当前域名
document.cookie = "color=blue; path=/; max-age=3600";
二、实用修复方法
正确选择 expires 与 max-age
优先推荐使用 max-age，因为它是一个相对时间，单位为秒，浏览器只要在当前时间基础上累加即可，跨时区问题被规避，且在某些环境下对兼容性更可靠。
如果必须使用 expires，请确保传入的日期是 UTC/GMT 时间格式，且使用 toUTCString() 输出。
// 使用 max-age 设置过期时间（推荐）
document.cookie = "theme=dark; max-age=604800; path=/; SameSite=Lax";// 使用 expires，必须传入 UTC 时间字符串
const expires = new Date();
expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = "theme=dark; expires=" + expires.toUTCString() + "; path=/;";路径、域名与访问范围
要确保 Cookie 能在目标页面生效，需要正确设置 path 与 domain。若希望在全站可用，通常设为 path=/；若涉及子域名，请使用 domain=example.com，并尽量避免将域名写错导致仅在特定子域名下可用。
示例：让子域名也能访问同一份 Cookie
document.cookie = "token=abc123; domain=example.com; path=/; max-age=86400";请注意：未显式设置 domain 时，Cookie 为主机限定 Cookie，仅对当前主机名可见；显式设置 domain 时需匹配浏览器的策略且不可跨越不可信域。
浏览器安全属性与兼容性
在现代浏览器中，Secure 与 SameSite 是不可忽视的安全属性。对于跨站请求，应该使用 SameSite=None; Secure，否则浏览器可能拒绝发送 Cookie。
需要注意的是，在本地调试时，使用 localhost 或自签名域名时，某些浏览器对 Secure 的要求会影响 Cookie 的存储，但如果不使用跨站请求，常见的本地场景仍可工作。
// 跨站场景示例：确保在 https 下并设置 Secure
document.cookie = "sessionId=xyz; max-age=3600; path=/; SameSite=None; Secure";三、实战技巧与调试
在浏览器中验证 Cookie 设置是否生效
使用浏览器开发者工具可以快速验证 Cookie 的实际存储情况。进入开发者工具的 Application（应用） -> Storage（存储） -> Cookies，查看目标域名下的 Cookie 列表及其属性。
注意：通过 document.cookie 读取的是可访问的 Cookie，HttpOnly 的 Cookie 不会出现在该结果中。
console.log(document.cookie); // 仅显示可通过 JS 访问的 Cookie读取与检查的常用技巧
在控制台执行简单的读取与写入操作，可以快速判断是否因为日期格式、域名或路径导致过期时间无效。
如果需要逐条排查，建议先单独测试 max-age 与 expires 的两种写法，再结合 domain、path 与 Secure/SameSite 组合，逐项确认。
// 快速测试：写入并立刻读取
document.cookie = "lang=cn; max-age=3600; path=/";
console.log(document.cookie);常见错误排查清单
在遇到过期时间不生效时，可以按照以下清单逐项排查：时间格式、单位、域名匹配、路径范围、Secure/SameSite 属性、HttpOnly 设置、浏览器兼容性。
对 localhost 场景，请确认是否使用了 Secure，以及是否需要临时省略 SameSite=None 设置以便测试。
// 排查示例：逐步简化设置
document.cookie = "test=a; max-age=60; path=/";
document.cookie = "test=b; expires=" + new Date().toUTCString() + "; path=/";
