什么是 Cookie？

Web 的设计方式是，Web 浏览器向网站发出的每个请求都是独立的。从设计上来说，Web 没有“记忆”。每次打开网页时，您访问的网站都无法记住您上次会话中的信息。 这有助于提高网络效率，因为无需使用机制来跟踪请求和响应。

但网络的健忘性也带来了一个问题。例如，如果您所在的网站无法记住您刚刚放入购物车的商品，那么购物车如何正常运作？

Cookie 的发明正是为了解决这个问题。

Cookie 可让网站记住您的信息

当您访问网站上的某个网页时，Web 浏览器会向网站的服务器请求网页上包含的资源，例如 HTML、CSS、JavaScript 或图片。

Web 浏览器和网站通过遵循 HTTP 协议进行互动。这是一套标准化的通信规则。

为了响应对资源的 HTTP 请求，网站服务器可以在提供资源本身的同时，还提供称为标头的额外信息。HTTP 响应中包含的 Set-Cookie 标头会告知浏览器存储一些文本：名称和值。这称为 Cookie。例如，响应标头 Set-Cookie: cat=tabby 会告知浏览器存储名称为“cat”、值为“tabby”的 Cookie。

设置该 Cookie 后，浏览器后续向网站发出的请求将包含 Cookie: cat=tabby 标头。网站的服务器可以从请求标头访问 Cookie，并使用该值。

Cookie 的工作原理：分步说明

假设您访问了网站 cats.example。该网站希望向您展示一张随机的猫咪图片，并记录向您展示了哪只猫。

以下步骤介绍了如何通过 Cookie 实现此目的。

1. 浏览器请求文件

您访问了网站 cats.example 的首页。

浏览器处理完首页 HTML 后，会请求网页上的文件，包括来自 cats.example 的 cat.jpg。

向 https://cats.example/cat.jpg 发出的 HTTP 请求

2. 网站服务器做出响应

cats.example 处的服务器会返回图片文件 cat.jpg。

在响应中，服务器包含一个标头：Set-Cookie: cat=tabby。

来自 https://cats.example/cat.jpg 的 HTTP 响应，带有 Set-Cookie: cat=tabby 标头

3. 浏览器接收响应

浏览器会收到图片文件，并处理其中包含的 Set-Cookie: cat=tabby 标头。

存储的 Cookie：名称 cat，值 tabby。

笔记本电脑的网络浏览器中的 Cookie cat=tabby。

4. 浏览器发出其他请求

从现在开始，您的浏览器会在向 cats.example 发出的请求中包含 Cookie: cat=tabby 标头。

向 https://cats.example/cat.jpg 发出的 HTTP 请求，带有 Cookie: cat=tabby 标头

当 cats.example Web 服务器收到请求时，它可以处理 Cookie 并对该值执行任何操作，例如确保不会再次向您发送同一只虎斑猫的图片。

以下是整个 Cookie 处理流程：

  1. 您的浏览器向网站的服务器请求文件。
  2. 服务器可以在发送的文件中添加标头（例如 Set-Cookie: cat=tabby），以响应请求。
  3. 当浏览器收到响应时，它会存储相应 Cookie。
  4. 在每个后续请求中，浏览器都会通过 Cookie: cat=tabby 标头将 Cookie 发送到服务器。


序列图，显示了网络浏览器、cats.example 和 cats.example 之间的请求和响应，以及 Cookie 的设置和发送方式。

使用 JavaScript 访问 Cookie

上一个示例使用 Set-Cookie 响应标头设置 Cookie。

您还可以使用 JavaScript 通过 document.cookie 方法创建 Cookie。

试用演示版：javascript-cookie.glitch.me。

了解详情：文档：cookie 属性。

我们为什么需要 Cookie？

1994 年，工程师 Lou Montulli 在软件公司 Netscape 工作，该公司后来打造了 20 世纪 90 年代中期最受欢迎的网络浏览器。与此同时，一家电信公司 MCI 正在尝试为全球首批在线商店之一构建购物车。MCI 联系了 Montulli，向他说明了他们的问题。Montulli 随即在 HTTP 中添加了一项功能，使网站能够在用户的 Web 浏览器上存储少量文本（名称和值），例如 cart-id=123。他将其称为“Cookie”，因为当时程序员使用“magic cookie”一词来指代数据通信中包含的一小段额外信息。

Montulli 在不到一周的时间内完成了 HTTP Cookie 的工作。他当时并不知道，Cookie 会成为关键 Web 平台功能（包括广告、登录、付款和欺诈检测）的基础。Cookie 是一种看似简单的技术，但会产生深远的副作用。

Cookie 的用途

Cookie 可让浏览器存储少量有关用户的信息，以便在多个请求之间“记住”某些内容。Cookie 有多种用途：

  • 会话管理
    允许网站识别用户，例如在不同网页上保持登录状态。
  • 个性化
    存储用户偏好设置（例如语言、主题或最近浏览过的商品），以自定义网站体验。
  • 跟踪
    过去，Cookie 一直用于跨网站跟踪用户行为，以实现定向广告和其他使用场景。

Cookie 主要用于标识符，而不是直接存储信息。

例如，在线宠物店的购物车 Cookie 不会列出商品，而是提供一个账号 ID，让宠物店可以在其服务器端数据存储中查找您的购物车中的商品。

向宠物店服务器发出的请求可能包含如下所示的 Cookie 标头：

Cookie: _cart=CART1.2.34567890.123456789

然后，服务器可以在其数据存储区中查找 _cart 账号，并包含有关请求的其他信息。

了解详情