17370845950

Cookie是浏览器在客户端存储键值对的机制，随同源请求自动发送；其API原始，需手动拼接字符串设置属性，读取时需解析并解码，且与localStorage的核心区别在于参与网络请求和精细作用域控制。

Cookie 是浏览器提供的一种在客户端存储少量数据的机制，本质是键值对字符串，随每次同源 HTTP 请求自动发送到服务器。

Cookie 的基本写法与注意事项

通过 document.cookie 设置或读取，但它的 API 极其原始：不能直接赋值对象，不支持过期时间参数传入函数，所有配置必须拼进字符串里。

• document.cookie 是一个可写的 getter/setter，写入时只接受字符串格式，例如：name=value; expires=Wed, 01 Jan 2025 00:00:00 GMT; path=/; domain=.example.com; Secure; HttpOnly
• 多个属性之间用分号加空格分隔，expires 必须是完整 GMT 时间字符串，不是毫秒数或 Date 对象
• 设置 path=/ 才能在全站访问；省略则默认为当前路径（比如 /user/profile 下设的 cookie 在 / 下读不到）
• HttpOnly 无法通过 JS 读取，只能由服务端设置；前端设了也无效，且不会报错

document.cookie = "theme=dark; expires=" + new Date(Date.now() + 86400000).toUTCString() + "; path=/; SameSite=Lax";

为什么 document.cookie 读取结果看起来像乱码？

因为 document.cookie 返回的是所有可访问 cookie 的拼接字符串，用分号+空格分隔，且不自动 URL 解码——如果存的时候用了 encodeURIComponent()，读出来就必须手动 decodeURIComponent()。

• 浏览器对 cookie 值中的空格、等号、分号、逗号等字符会自动编码，但行为不统一，建议始终自己编码/解码
• 读取时需按 ; 拆分，再按 = 分割键值，还要 trim 空格
• 没有内置方法判断某个 cookie 是否存在，只能遍历解析后匹配

function getCookie(name) {
  const cookies = document.cookie.split("; ").reduce((acc, pair) => {
    const [k, v] = pair.split("=");
    acc[k] = decodeURIComponent(v);
    return acc;
  }, {});
  return cookies[name];
}

Cookie 和 localStorage / sessionStorage 有什么根本区别？

核心差异不在容量或 API，而在于「是否参与网络请求」和「作用域控制粒度」。

• Cookie 会随每个同源请求自动附加在 Cookie 请求头中，增大请求体积；localStorage 完全不发给服务器
• Cookie 支持 Domain、Path、SameSite、Secure 等精细作用域控制；localStorage 只看协议+域名+端口
• Cookie 大小限制约 4KB/条，localStorage 通常有 5–10MB；但 Cookie 总数也受限（主流浏览器约 180 条）
• Cookie 可被服务端设置（如登录后 Set-Cookie），localStorage 只能前端操作

现代前端还该用 Cookie 存用户偏好这类数据吗？

一般不该。除非你明确需要服务端参与（比如 SSR 渲染要读取主题色），否则优先用 localStorage 或 sessionStorage。

• Cookie 增加请求头体积，影响首屏性能，尤其移动端弱网下明显
• SameSite 默认策略（Lax）已阻止跨站 POST 请求携带 Cookie，很多前端跳转场景会意外失效
• 隐私模式、第三方 Cookie 屏蔽（Chrome 115+ 默认禁用第三方 Cookie）会让依赖 Cookie 的前端逻辑静默失败
• 如果只是存 dark/light 模式、语言偏好，localStorage.setItem("theme", "dark") 更简单、更可控

真正容易被忽略的是：Cookie 的 expires 和 max-age 并存时，后者优先；而 max-age 是秒数，expires 是绝对时间，混用极易出错。另外，SameSite=None 必须搭配 Secure，否则现代浏览器直接拒绝设置。