修改 Cookie 值需显式指定原有属性（path、domain、secure、expires/max-age），否则浏览器用默认值覆盖导致属性丢失；因 document.cookie 不暴露完整属性，建议预存配置或统一约定默认值，并封装带参数校验的 updateCookie 函数。
修改 Cookie 的已有值而不覆盖其他属性，关键在于重新设置同名 Cookie 时，必须显式指定原有属性（如 path、domain、secure、expires 或 max-age），否则浏览器会用默认值（如 path=/、无 domain、无过期时间等）覆盖原 Cookie，导致属性丢失。
先读取再重建：获取当前 Cookie 属性
JavaScript 原生不提供直接读取 Cookie 属性（如 path、expires）的 API。浏览器只暴露 document.cookie 字符串，其中只包含 name=value 和部分属性（如 path、domain 等），且需手动解析。因此，若要保留原有属性，需在设置新值前，确保你知道原 Cookie 的关键属性：
- 如果该 Cookie 是你代码中创建的，建议在设置时记录其属性（例如存在全局配置或缓存对象中）
- 若无法预知，可尝试从
document.cookie中提取路径和 domain（注意：expires和max-age不会出现在读取结果中，仅写入时生效） - 常见做法：统一约定默认属性（如固定
path=/、domain=example.com），后续修改时严格复用
正确覆盖：带全属性重新设置
修改值的本质是用新 Cookie 替换旧 Cookie，而替换成功且不丢失属性的前提是——新 Cookie 的 name + path + domain + secure 标志必须完全一致。示例：
// 假设原 Cookie 是这样设置的： // document.cookie = "theme=light; path=/; domain=example.com; secure; expires=Fri, 31 Dec 2030 23:59:59 GMT"; // ✅ 正确修改值（保留所有关键属性）： document.cookie = "theme=dark; path=/; domain=example.com; secure; expires=Fri, 31 Dec 2030 23:59:59 GMT"; // ❌ 错误：漏掉 domain 或 path，会导致生成一个新 Cookie（同名但属性不同），旧 Cookie 仍存在 document.cookie = "theme=dark"; // 只改值，其他属性用默认值 → 原 Cookie 未被覆盖！
封装安全的 setCookie 函数
为避免遗漏，推荐封装一个可复用的更新函数，把属性作为参数传入，强制显式声明：
立即学习“Java免费学习笔记（深入）”；
- 接受 name、value、以及可选的 path/domain/secure/expires/maxAge
- 若未传某属性，默认使用安全保守值（如
path='/'），而非依赖浏览器默认 - 对 expires 使用 Date 对象转字符串，maxAge 优先于 expires（两者不要同时设）
function updateCookie(name, value, options = {}) {
const { path = '/', domain, secure, expires, maxAge } = options;
let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=${path}`;
if (domain) cookieStr += `; domain=${domain}`;
if (secure) cookieStr += '; secure';
if (maxAge) cookieStr += `; max-age=${maxAge}`;
else if (expires) cookieStr += `; expires=${expires.toUTCString()}`;
document.cookie = cookieStr;
}
// 使用示例（保持与原 Cookie 一致的 domain 和 path）
updateCookie('user_token', 'abc123xyz', {
path: '/',
domain: 'example.com',
secure: true,
maxAge: 3600
});
注意 SameSite 和 HttpOnly 的限制
SameSite 属性（如 SameSite=Lax）可在设置时指定，但不影响读写逻辑；而 HttpOnly Cookie 完全不可通过 JavaScript 访问或修改——这类 Cookie 只能由服务端更新。如果你发现 document.cookie 里看不到某个 Cookie，很可能它被标记为 HttpOnly，此时前端无法修改，需联系后端配合。
