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。

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

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

# react # javascript # java # js # 前端 # cookie # seo # 编码 # 浏览器 # 工具 # session # 后端 # xss # 封装 # date

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】