【免费下载】 JavaScript教程：深入理解Cookie与document.cookie

JavaScript教程：深入理解Cookie与document.cookie

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

什么是Cookie？

Cookie是存储在用户浏览器中的小型文本字符串，是HTTP协议的一部分，最初由RFC 6265规范定义。它主要用于在客户端和服务器之间保持状态信息。

Cookie的工作原理

1. 服务器设置Cookie：当服务器响应HTTP请求时，可以通过Set-Cookie头部向浏览器发送Cookie
2. 浏览器存储Cookie：浏览器收到后会将这些信息存储在本地
3. 自动发送Cookie：之后每次向同一服务器发送请求时，浏览器会自动将Cookie附加到请求的Cookie头部中

Cookie的主要用途

最常见的用途包括：

• 用户会话管理（登录状态保持）
• 个性化设置存储
• 用户行为跟踪

使用document.cookie操作Cookie

读取Cookie

// 读取当前域下的所有Cookie
alert(document.cookie); // 显示格式：name1=value1; name2=value2;...

Cookie值是以分号分隔的name=value对。要获取特定Cookie，需要解析这个字符串。

写入Cookie

// 设置一个简单的Cookie
document.cookie = "username=JohnDoe";

// 设置带选项的Cookie
document.cookie = "username=JohnDoe; max-age=3600; path=/";

重要注意事项：

• 写入操作是追加而非覆盖
• 名称和值应该使用encodeURIComponent()进行编码
• 单个Cookie大小限制为4KB
• 每个域名下的Cookie数量有限制（通常20个左右）

Cookie的重要选项

path

指定哪些路径可以访问该Cookie：

document.cookie = "name=value; path=/admin";

• 默认是设置Cookie时的当前路径
• 通常设置为path=/让全站可访问

domain

控制哪些域名可以访问Cookie：

document.cookie = "name=value; domain=example.com";

• 默认是当前域名
• 可以设置为父域名让子域名也能访问

expires和max-age

控制Cookie的过期时间：

// 使用expires（GMT格式）
let date = new Date(Date.now() + 86400e3);
document.cookie = `name=value; expires=${date.toUTCString()}`;

// 使用max-age（秒数）
document.cookie = "name=value; max-age=3600"; // 1小时后过期

如果不设置，Cookie将在浏览器关闭时删除（会话Cookie）。

secure

仅通过HTTPS连接发送：

document.cookie = "name=value; secure";

samesite

防止CSRF攻击的重要安全选项：

// 严格模式 - 完全阻止跨站请求携带Cookie
document.cookie = "name=value; samesite=strict";

// 宽松模式 - 允许安全的GET请求携带Cookie
document.cookie = "name=value; samesite=lax";

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
  })
}

安全注意事项

1. HttpOnly Cookie：防止XSS攻击窃取Cookie
2. Secure标记：确保只在HTTPS连接中传输
3. SameSite策略：防御CSRF攻击
4. GDPR合规：在欧盟地区需要用户同意才能设置跟踪Cookie

第三方Cookie

由当前访问域名以外的其他域名设置的Cookie称为第三方Cookie，常用于广告跟踪。现代浏览器对第三方Cookie有严格限制：

• Safari默认阻止所有第三方Cookie
• Firefox维护了第三方Cookie的黑名单
• Chrome计划逐步淘汰第三方Cookie

总结

Cookie是Web开发中重要的客户端存储机制，但使用时需要注意：

• 大小和数量限制
• 安全设置（Secure、HttpOnly、SameSite）
• 隐私合规要求（如GDPR）
• 现代浏览器对第三方Cookie的限制

正确使用Cookie可以增强Web应用的功能和用户体验，而不当使用则可能导致安全漏洞或隐私问题。

【免费下载链接】ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info