请解释 Cookie 的作用和属性。如何使用 JavaScript 操作 Cookie？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

Cookie 的主要作用是在客户端（通常是浏览器）存储少量数据，并在客户端与服务器之间传递。它们常用于：

会话管理： 跟踪用户的登录状态、购物车信息等。
个性化： 存储用户的偏好设置，如语言、主题等。
跟踪： 记录用户行为，用于分析或广告定向。

Cookie 的主要属性包括：

name=value： Cookie 的名称和值，必须以 name=value 的形式出现。
expires=date 或 max-age=seconds： 指定 Cookie 的过期时间。expires 使用具体的日期和时间，max-age 使用从 Cookie 创建时开始的秒数。如果两者都不指定，则 Cookie 会在浏览器会话结束时过期。
domain=domain： 指定 Cookie 应该被发送到的域。默认为设置 Cookie 的页面的域。
path=path： 指定 Cookie 应该被发送到的路径。默认为设置 Cookie 的页面的路径。
secure： 如果存在此属性，则 Cookie 只能通过 HTTPS 连接发送。
HttpOnly： 如果存在此属性，则 Cookie 不能通过 JavaScript 访问，主要用于防止 XSS 攻击。
SameSite： 控制 Cookie 如何在跨站点请求中发送，可以设置为 Strict、Lax 或 None。

使用 JavaScript 操作 Cookie：

JavaScript 使用 document.cookie 属性来操作 Cookie。此属性是一个字符串，包含所有当前页面的 Cookie，格式如下：name1=value1; name2=value2; ...。

读取 Cookie：

// www.javascriptcn.com code example
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    let [cookieName, cookieValue] = cookie.trim().split('=');
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

const myCookieValue = getCookie('myCookieName');
console.log(myCookieValue); // 输出 myCookieName 的值，或 null

设置 Cookie：

// www.javascriptcn.com code example
function setCookie(name, value, options = {}) {
  let cookieString = `${name}=${encodeURIComponent(value)};`;

  if (options.expires) {
    cookieString += `expires=${options.expires.toUTCString()};`;
  } else if(options.maxAge){
     cookieString += `max-age=${options.maxAge};`
  }
  if (options.domain) {
    cookieString += `domain=${options.domain};`;
  }
  if (options.path) {
    cookieString += `path=${options.path};`;
  }
  if (options.secure) {
    cookieString += 'secure;';
  }
  if (options.httpOnly) {
    cookieString += 'HttpOnly;';
  }
    if (options.sameSite) {
      cookieString += `SameSite=${options.sameSite};`
  }
  document.cookie = cookieString;
}

// 设置一个 Cookie
setCookie('myCookieName', 'myCookieValue', { expires: new Date('2024-12-31'), path: '/', domain: 'example.com', secure: true, sameSite: 'Lax'});

// 设置一个 10 分钟后过期的 Cookie
setCookie('shortCookie', 'shortValue', { maxAge: 600, path: '/'})

删除 Cookie：

function deleteCookie(name) {
    setCookie(name, "", { expires: new Date(0) })
}


deleteCookie('myCookieName'); // 删除 myCookieName

本题详细解读

Cookie 的基本概念

Cookie 是一种存储在用户计算机上的小型文本文件，由 Web 服务器发送到用户的浏览器。当浏览器再次访问该服务器时，会将存储的 Cookie 发送回服务器。这种机制使得服务器可以记住用户的信息，并据此提供个性化服务或者管理会话状态。

Cookie 的作用

会话管理:
- 用户登录: 服务器在用户成功登录后，设置一个包含用户身份信息的 Cookie，使得用户在后续请求中无需再次登录。
- 购物车: 在电子商务网站中，当用户将商品添加到购物车时，商品的 ID 和数量可以存储在 Cookie 中，即便用户关闭浏览器，下次访问时购物车仍然保留。
个性化设置:
- 语言偏好: 用户可以选择使用特定的语言，服务器可以将此偏好存储在 Cookie 中，使得每次用户访问网站时都能显示正确的语言。
- 主题选择: 用户可以选择网站的特定主题（例如深色或浅色），此选择可以存储在 Cookie 中。
跟踪:
- 用户行为跟踪: 网站可以通过 Cookie 跟踪用户的浏览历史、点击行为等，用于分析用户行为和改进网站设计。
- 广告定向: 广告平台可能会利用 Cookie 来记录用户的兴趣爱好，以便推送更加相关的广告。

Cookie 的属性详解

name=value: 这是 Cookie 的核心，name 是 Cookie 的名称（唯一标识），value 是 Cookie 的值，都是字符串，必须经过 URI 编码。
expires=date: 定义 Cookie 的过期时间，过了这个时间，Cookie 将被浏览器删除。日期格式必须是 Wdy, DD Mon YYYY HH:MM:SS GMT。例如 Thu, 21 Dec 2024 16:00:00 GMT 。如果未指定此属性，则 Cookie 在浏览器会话结束后被删除（即关闭浏览器）。
max-age=seconds: 定义 Cookie 的最大存在时间（以秒为单位），它会覆盖 expires。例如，max-age=3600 表示 Cookie 将在 1 小时后过期。
domain=domain: 指定 Cookie 可以被发送到的域。例如 domain=example.com，则 Cookie 可以发送到 example.com 和其子域（如 www.example.com，blog.example.com）。如果未指定此属性，则 Cookie 默认只发送到设置它的域名。
path=path: 指定 Cookie 可以被发送到的路径。例如 path=/blog，则 Cookie 将被发送到 example.com/blog 下的所有路径。如果未指定此属性，则 Cookie 默认只发送到设置它的路径下的路径。
secure: 如果存在此属性，则 Cookie 只在 HTTPS 连接下发送，可以防止中间人攻击窃取 Cookie。
HttpOnly: 如果存在此属性，则 Cookie 无法通过 JavaScript 访问，可以防止 XSS 攻击窃取 Cookie。这对包含敏感信息（如会话 ID）的 Cookie 尤其重要。
SameSite: 控制 Cookie 在跨站请求中的发送行为，可以设置为以下三种值：
- Strict: Cookie 只在当前站点的第一方请求中发送，不包括跨域请求，可以最大限度地防止 CSRF 攻击。
- Lax: Cookie 在第一方请求和部分跨域请求中发送，例如在用户点击链接或表单提交时发送。
- None: Cookie 在所有请求中发送，包括跨域请求，但必须同时设置 secure 属性，即必须使用 HTTPS 协议。

JavaScript 操作 Cookie 的注意事项

字符串处理: document.cookie 返回的是一个包含所有 Cookie 的字符串，需要通过字符串处理方法来解析和操作。
编码解码: Cookie 的值中可能包含特殊字符，在设置 Cookie 时需要使用 encodeURIComponent 编码，在读取 Cookie 时需要使用 decodeURIComponent 解码，以确保值被正确存储和读取。
作用域: 设置 Cookie 时需要注意 domain 和 path 属性，确保 Cookie 被发送到正确的域和路径。
安全: 在处理敏感信息时，应当设置 secure 和 HttpOnly 属性，并使用 HTTPS 协议。
大小限制: 每个 Cookie 的大小限制约为 4KB，每个域下的 Cookie 数量也有上限。
第三方 Cookie: 某些浏览器会限制第三方 Cookie 的使用，可能影响跨域的跟踪和广告等功能。
复杂场景: 对于复杂的 Cookie 操作，可以考虑使用专门的 Cookie 操作库。

代码解析

推荐答案中的代码提供了基本的 Cookie 设置，获取和删除功能，代码分别使用了字符串处理和编码解码，通过选项对象来设置不同的 Cookie 属性，可以灵活设置 Cookie 的各种参数，并且考虑了各种安全性和功能性参数。