17370845950

JavaScript通过document.cookie读写Cookie，其本质是需手动解析拼接的字符串；读取需split分隔并解码value，设置需拼接key=value及expires/path/domain等选项，删除则覆盖过期时间。

JavaScript 通过 document.cookie 接口读写 Cookie，它不是对象而是字符串，操作需手动解析和拼接。核心在于理解其格式、作用域限制及安全特性。

读取 Cookie：手动解析字符串

浏览器只提供一个字符串形式的 document.cookie，所有 Cookie 以分号+空格分隔，每项形如 key=value。没有内置方法直接获取指定键，需自行解析：

• 用 document.cookie.split('; ') 拆分为数组
• 遍历每一项，用 .split('=') 分离键值，注意对 value 进行 decodeURIComponent() 解码（因 Cookie 值默认被编码）
• 推荐封装成函数，例如：
  function getCookie(name) { const cookies = document.cookie.split('; '); for (let c of cookies) { const [k, v] = c.split('='); if (k === name) return decodeURIComponent(v); } return null; }

设置 Cookie：拼接字符串并赋值

向 document.cookie 赋值会添加或更新 Cookie，格式为 key=value; options。关键选项包括：

• expires 或 max-age：控制过期时间（expires 是 GMT 时间字符串，max-age 是秒数）
• path：默认为当前路径，设为 / 可使 Cookie 在整个域名下有效
• domain：指定可访问的域名（如 .example.com 允许子域共享）
• secure：仅在 HTTPS 下发送
• HttpOnly：无法通过 JS 访问（服务端设置，JS 无法读写）
• SameSite：防范 CSRF，可选 Strict、Lax 或 None

删除 Cookie：覆盖过期时间

Cookie 无法直接删除，只能通过设置已过期的时间使其失效：

• 将 expires 设为过去的时间（如 Thu, 01 Jan 1970 00:00:00 GMT）
• 必须保证 path 和 domain 与原 Cookie 一致，否则可能删错或失败
• 示例：
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;"

注意事项与替代方案

原生 Cookie 操作繁琐且易出错，实际开发中建议：

• 使用成熟工具库（如 js-cookie），支持链式调用、自动编解码、类型转换
• 敏感信息不要存 Cookie，优先用 HttpOnly + Secure 配合服务端验证
• 单页应用中，考虑用 localStorage 或 sessionStorage 存储非敏感前端状态（但不参与 HTTP 请求）
• 注意同源策略和第三方 Cookie 限制（尤其 Safari 和 iOS 浏览器）