JavaScript 中 Cookie 的读写操作

Cookie 是存储在用户浏览器中的小型文本数据，通常用于会话管理、个性化设置等。以下是 JavaScript 中 Cookie 的读写操作方法：

写入 Cookie

通过 document.cookie 属性可以设置 Cookie。Cookie 的格式为键值对，并可以附加过期时间、路径、域名等属性：

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

• username=John 是键值对。
• expires 设置 Cookie 的过期时间（UTC 格式）。
• path=/ 表示 Cookie 在整个网站下有效。

读取 Cookie

读取所有 Cookie 可以通过 document.cookie，返回的是一个字符串，包含当前域名下的所有 Cookie：

let allCookies = document.cookie;
console.log(allCookies); // 输出类似 "username=John; theme=dark"

若需获取特定 Cookie，可以解析字符串：

function getCookie(name) {
  let cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    let [key, value] = cookie.trim().split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

let username = getCookie('username');
console.log(username); // 输出 "John"

删除 Cookie

删除 Cookie 的方法是将其过期时间设置为过去的时间：

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

封装 Cookie 操作函数

以下是一个封装好的 Cookie 操作工具函数：

const CookieUtil = {
  set(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
  },

  get(name) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [key, val] = cookie.trim().split('=');
      if (key === name) return decodeURIComponent(val);
    }
    return null;
  },

  remove(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  }
};

// 示例
CookieUtil.set('theme', 'dark', 30); // 设置 30 天后过期
let theme = CookieUtil.get('theme'); // 读取
CookieUtil.remove('theme'); // 删除

注意事项

• Cookie 的大小通常限制为 4KB。
• 每个域名下的 Cookie 数量有限制（通常为 20 个左右）。
• 敏感信息不应存储在 Cookie 中，避免安全问题。
• 现代开发中，localStorage 和 sessionStorage 是更简单的替代方案，但 Cookie 仍用于与服务器交互的场景（如身份验证）。