js如何操作cookie

JavaScript 操作 Cookie 主要通过 document.cookie 属性实现，涵盖设置、读取、解析和删除等操作。以下是具体方法及注意事项：

• 设置 Cookie通过 document.cookie 直接赋值，需指定名称、值、过期时间（expires）和作用路径（path）。若未设置 expires，则为会话 Cookie（浏览器关闭后失效）；未设置 path，默认仅在当前目录及其子目录生效。

  document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

• 读取 Cookiedocument.cookie 返回所有 Cookie 的字符串（如 "username=John Doe; otherCookie=value"），需手动解析。

  let cookies = document.cookie;console.log(cookies);

• 解析 Cookie编写解析函数（如 getCookie）按名称提取值，需处理空格和分隔符。

  function getCookie(name) { let cookieName = name + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(cookieName) == 0) { return c.substring(cookieName.length, c.length); } } return "";}let username = getCookie("username");

• 删除 Cookie将 expires 设置为过去时间（如 1970-01-01），且 path 需与设置时一致。

  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

• 编码处理设置 Cookie 时用 encodeURIComponent 编码值，读取时用 decodeURIComponent 解码，避免特殊字符导致截断或解析错误。

  // 设置时编码document.cookie = "itemName=" + encodeURIComponent("商品名称包含特殊字符") + "; path=/";// 读取时解码let itemName = decodeURIComponent(getCookie("itemName"));

• 安全措施

  避免存储敏感信息：如密码、信用卡号等。

  服务器端设置标志：

  HttpOnly：防止 JavaScript 读取 Cookie，抵御 XSS 攻击（需服务器配置，如 PHP 的 setcookie("name", "value", ["httponly" => true])）。

  Secure：仅通过 HTTPS 传输 Cookie，防止中间人攻击。

  设置合理过期时间：减少长期有效 Cookie 的风险。

  验证来源：服务器端检查 Cookie 的域名和路径，防止跨域攻击。

  优先使用 Session：敏感信息存储在服务器端 Session 更安全。

主流框架（React、Vue、Angular）可通过专用库简化操作，自动处理编码和部分安全问题：

• React：使用 js-cookie 库。

  import Cookies from 'js-cookie';Cookies.set('name', 'value', { expires: 7 }); // 设置 7 天后过期let value = Cookies.get('name'); // 读取Cookies.remove('name'); // 删除

• Vue：使用 vue-cookies 插件。

  import VueCookies from 'vue-cookies';Vue.use(VueCookies);this.$cookies.set('name', 'value', '7d'); // 设置 7 天后过期let value = this.$cookies.get('name'); // 读取this.$cookies.remove('name'); // 删除

• Angular：使用 ngx-cookie-service。

  import { CookieService } from 'ngx-cookie-service';constructor(private cookieService: CookieService) {}ngOnInit() { this.cookieService.set('name', 'value', 7); // 设置 7 天后过期 let value = this.cookieService.get('name'); // 读取 this.cookieService.delete('name'); // 删除}

• 大小限制：单个 Cookie 通常不超过 4KB。
• 安全性风险：JavaScript 操作 Cookie 仍存在 XSS 等风险，敏感场景建议结合服务器端验证和 Session 使用。
• 替代方案：非敏感数据可考虑 localStorage 或 sessionStorage。