javascript cookie如何操作_怎样安全地存储用户状态【教程】

document.cookie 是分号分隔的字符串而非键值对象，读写需手动解析与拼接；存敏感信息如 Token 易受 xss 攻击，应优先用 HttpOnly + Secure Cookie 配合 Authorization 请求头；前端状态推荐 localStorage 或 sessionStorage。

javaScript 中 document.cookie 的基本读写逻辑

原生操作 Cookie 并不复杂，但容易误以为它是类似 localStorage 的键值对对象——实际上它是一段用分号分隔的字符串，每次读取都得手动解析，写入也得拼接完整格式。

写入示例：
document.cookie = "token=abc123; path=/; expires=Wed, 01 Jan 2025 00:00:00 GMT; Secure; HttpOnly";
注意：这里 HttpOnly 是服务端设置的，js 无法通过 document.cookie 写入该标志；Secure 表示仅在 https 下发送，JS 可以声明，但无效（浏览器忽略）。

• 必须显式指定 path，否则默认为当前路径，导致跨路由读不到
• expires 或 max-age 缺失时，Cookie 变成会话级（关闭浏览器即失效）
• 中文或特殊字符需先 encodeURIComponent()，否则可能截断或报错

为什么不能用 document.cookie 存 token 或敏感状态

因为 document.cookie 暴露在 JS 环境中，XSS 攻击可直接窃取。哪怕加了 HttpOnly，那 JS 就根本读不到——这恰恰说明：如果 JS 需要读写，它就一定不是 HttpOnly。

• 前端存 token 做自动鉴权？优先走 Authorization: Bearer xxx 请求头，token 由后端下发并设为 HttpOnly + Secure
• 若必须前端维护状态（如语言偏好、主题），用 localStorage 更合适，且无需担心过期逻辑
• 需要服务端参与的状态（如登录态），Cookie 仅作传输载体，真实校验和续期全由后端控制

封装一个安全可用的 Cookie 工具函数

避免每次手动拼字符串出错，建议封装最小可用函数，只处理编码、路径、过期时间等基础项，不尝试模拟对象 API。

function setCookie(name, value, options = {}) {   let cookieStr = `${name}=${encodeURIComponent(value)}`;   if (options.expires) cookieStr += `; expires=${options.expires.toUTCString()}`;   if (options.maxAge) cookieStr += `; max-age=${options.maxAge}`;   if (options.path) cookieStr += `; path=${options.path}`;   if (options.domain) cookieStr += `; domain=${options.domain}`;   if (options.secure) cookieStr += '; secure';   document.cookie = cookieStr; }  function getCookie(name) {   const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));   return match ? decodeURIComponent(match[2]) : null; }

• 不支持 SameSite 自动注入，需手动传 options.sameSite = 'Strict' 并拼进字符串
• 删除 Cookie：调用 setCookie('name', '', { expires: new date(0) })
• 不要试图用正则匹配多个同名 Cookie，浏览器只返回第一个匹配项

现代替代方案比 Cookie 更适合前端状态管理

除非明确需要服务端读取或依赖浏览器自动携带（如传统表单提交），否则大多数用户状态不需要 Cookie。

立即学习“Java免费学习笔记（深入）”；

• 纯前端状态（如折叠菜单、暗色模式）：用 localStorage + useEffect（react）或事件监听同步
• 需要服务端感知但又不想暴露敏感字段：用短时效 sessionStorage 存非敏感标识，后端用该标识查 session
• SSR/seo 场景下需首屏读取状态：服务端渲染时注入到 window.__INITIAL_STATE__，前端优先读它

真正难的不是怎么写 Cookie，而是判断「这个状态到底该不该放 Cookie 里」——多数时候答案是否定的。