HTML如何读写浏览器Cookies信息

本文深入剖析了HTML中通过document.cookie读写浏览器Cookies的核心要点与常见陷阱，强调路径（path）、域名（domain）、URL编码（encodeURIComponent/decodeURIComponent）及HttpOnly安全限制四大关键维度——稍有疏忽（如遗漏path=/、未处理中文编码、误判HttpOnly可见性）便会导致跨路径/子域失效、数据截断或静默失败；同时指出document.cookie返回的是需手动解析的原始字符串，易因空格、重复键或粗暴分割引发bug，并理性建议：现代前端开发应优先选用localStorage配合自定义过期逻辑，仅在CSRF防护或跨子域认证等不可替代场景才依赖Cookie，真正避坑的关键在于理解其作用域机制与安全设计本质。

document.cookie 读写必须注意路径和域名作用域

直接赋值 document.cookie 只能写入，且默认绑定当前路径（/current/path），同名 cookie 在不同路径下互不干扰。比如在 /admin/user 页面设的 token=abc，在 /api 页面读不到，除非显式指定 path=/。

• 写入时务必加 path=/（或明确需要的路径）才能跨路由共享
• 若站点有子域名（如 app.example.com 和 api.example.com），需额外加 domain=.example.com（注意开头的点）
• document.cookie 读取返回的是字符串拼接结果（"a=1; b=2; c=3"），没有内置解析，得自己拆分和解码
• 中文或特殊字符必须用 encodeURIComponent() 编码，否则会截断或报错

手动解析 document.cookie 容易漏掉空格和重复键

浏览器返回的 document.cookie 字符串中，键值对之间用分号+空格分隔（"; "），但首尾可能有空格，同一 key 也可能多次出现（后写的覆盖前写的，但解析时若不处理会取到旧值）。

• 别用 split(";") 粗暴切分——要 split("; ") 或正则匹配更稳
• 提取单个值推荐用： document.cookie.split("; ").find(row => row.startsWith("mykey="))?.split("=")[1]
• 必须 decodeURIComponent() 解码，否则中文变 %E4%BD%A0%E5%A5%BD
• 如果页面同时存在 theme=dark 和 theme=light（比如脚本重复执行），靠 find 会取到第一个，实际生效的是最后一个——解析逻辑得配合写入顺序或加时间戳校验

HttpOnly cookie 完全无法用 JavaScript 读取

服务端设置 Set-Cookie: sessionid=xxx; HttpOnly; Secure 后，这个 cookie 对 document.cookie 是隐身的。这是安全机制，不是 bug。

• 前端永远读不到 HttpOnly 标记的 cookie，任何尝试都返回空字符串或被忽略
• 登录态、敏感 token 应该由后端设为 HttpOnly，前端只管发请求，别试图“读出来再传”
• 调试时如果发现 document.cookie 里没有预期的值，先看响应头里的 Set-Cookie 是否带了 HttpOnly
• 需要前端参与的状态（如语言偏好、主题）才适合用 JS 可读写的 cookie

现代项目优先用 localStorage + 自定义过期逻辑，而非 cookie

cookie 有 4KB 上限、每次请求自动携带（增加 header 体积）、API 调用不可控等硬伤。除兼容老系统或必须随 HTTP 请求透传的场景外，不建议新逻辑依赖它。

• 存用户偏好、表单草稿这类纯前端数据，用 localStorage.setItem("theme", "dark") 更干净
• 需要过期控制？自己存时间戳：localStorage.setItem("token", JSON.stringify({value: "abc", expires: Date.now() + 3600000}))
• cookie 真正不可替代的场景只剩两个：CSRF token 同步（需服务端验证）、跨子域登录态透传（且后端不支持 JWT）
• Vue/React 项目里封装一个 useCookie Hook 很容易，但多数时候你其实只需要 useStorage

cookie 的坑不在语法，而在作用域、编码、HttpOnly 和自动携带这四条线交叉时的隐性行为。改一行 path=/ 或少一次 encodeURIComponent，就可能让整个登录流程静默失败。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~