document.cookie读写需严格注意路径、域名、编码及HttpOnly限制；必须显式设置path=/和domain=.example.com以跨路径/子域共享，中文需encodeURIComponent编码，读取后须decodeURIComponent解码，且HttpOnly Cookie无法通过JS读取。
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 项目里封装一个
useCookieHook 很容易，但多数时候你其实只需要useStorage
cookie 的坑不在语法，而在作用域、编码、HttpOnly 和自动携带这四条线交叉时的隐性行为。改一行 path=/ 或少一次 encodeURIComponent，就可能让整个登录流程静默失败。
