JavaScript教程：深入理解Cookie及其应用

JavaScript教程：深入理解Cookie及其应用

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是Cookie？

Cookie是浏览器存储的小型文本数据，属于HTTP协议的一部分。它们通常由服务器通过Set-Cookie响应头设置，之后浏览器会自动在每次请求同一域名时通过Cookie请求头发送这些数据。

Cookie的核心用途

最常见的Cookie应用场景是用户认证：

1. 用户登录时，服务器通过Set-Cookie设置包含会话ID的Cookie
2. 后续请求中，浏览器自动发送该Cookie
3. 服务器通过Cookie识别用户身份

浏览器中的Cookie操作

JavaScript可以通过document.cookie访问和操作Cookie，但需要注意一些特殊行为：

读取Cookie

document.cookie返回所有Cookie的字符串，格式为name=value对，用分号分隔：

alert(document.cookie); // 显示类似"user=John; theme=light"

写入Cookie

写入document.cookie时需注意：

• 只更新指定的Cookie，不影响其他
• 需要使用encodeURIComponent编码特殊字符

document.cookie = `user=${encodeURIComponent("John Doe")}`;

Cookie的重要属性

设置Cookie时可以指定多种属性：

作用域控制

• path：指定Cookie可访问的URL路径前缀
• domain：控制哪些域名可访问Cookie（有安全限制）

document.cookie = "user=John; path=/; domain=example.com";

生命周期管理

• expires：设置过期时间（GMT格式）
• max-age：设置存活秒数

// 1天后过期
let date = new Date(Date.now() + 86400e3);
document.cookie = `user=John; expires=${date.toUTCString()}`;

// 或使用max-age（1小时）
document.cookie = "user=John; max-age=3600";

安全设置

• secure：仅通过HTTPS传输
• httpOnly：禁止JavaScript访问
• samesite：防御CSRF攻击

// 安全Cookie示例
document.cookie = "session=abc123; secure; samesite=lax";

Cookie的限制

1. 单个Cookie大小不超过4KB
2. 每个域名下Cookie数量有限（通常20+）
3. 浏览器可能拒绝第三方Cookie

实用Cookie操作函数

获取Cookie

function getCookie(name) {
  let matches = document.cookie.match(
    new RegExp(`(?:^|; )${name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1')}=([^;]*)`)
  );
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

设置Cookie

function setCookie(name, value, options = {}) {
  options = {
    path: '/',
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

  for (let optionKey in options) {
    updatedCookie += `; ${optionKey}`;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += `=${optionValue}`;
    }
  }

  document.cookie = updatedCookie;
}

删除Cookie

function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  });
}

第三方Cookie与隐私

第三方Cookie通常用于跨站跟踪，现代浏览器提供了多种限制措施：

1. 默认阻止第三方Cookie
2. 提供隐私保护模式
3. 实施SameSite策略

理解Cookie的工作原理对于Web开发至关重要，合理使用可以提升用户体验，同时要注意保护用户隐私和安全。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info