Web 的设计方式使得从网络浏览器向网站发出的每个请求都是单独的。从设计上讲,网络没有“内存”。每次打开网页时,您所访问的网站都无法记住上次会话中的信息。这样有助于提高网络效率并简化其结构,因为无需使用机制来跟踪请求和响应。
但 Web 的健忘特性也带来了问题。例如,如果您当前访问的网站无法记住您刚刚放入购物车中的商品,购物车又该如何运作?
Cookie 就是为了解决这个问题而发明的。
Cookie 为网站提供记忆功能
当您访问某个网站上的网页时,您的网络浏览器会向该网站的服务器发出请求,请求该网页包含的资源,例如 HTML、CSS、JavaScript 或图片。
网络浏览器和网站通过遵循 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
的首页。
您的浏览器会请求网页上的文件,包括 cats.example
中的 cat.jpg
。
2. 网站服务器响应
cats.example
上的服务器会返回图片文件 cat.jpg
。
在响应中,服务器会添加标头:Set-Cookie:cat=tabby
。
3. 浏览器收到响应
浏览器会接收图片文件,并处理其中包含的 Set-Cookie:cat=tabby
标头。
存储一个 Cookie:名称 cat
,值 tabby
。
4. 浏览器发出其他请求
从现在开始,您的浏览器会在向 cats.example
发出请求时添加标头 Cookie:cat=tabby
。
当 cats.example
Web 服务器收到请求时,它可以处理 Cookie,并可以使用该值执行任何操作,例如确保不会再次向您发送同一虎斑猫的图片。
下面是整个 Cookie 流程:
- 您的浏览器向网站发出文件请求。
- 网站的服务器可以将
Set-Cookie:cat=tabby
等标头添加到响应请求时发送的文件中。 - 当浏览器收到响应时,它会存储 Cookie。
- 在每次后续请求中,浏览器都会在
Cookie:cat=tabby
标头中将 Cookie 发送到服务器。
使用 JavaScript 访问 Cookie
上例使用 Set-Cookie
响应标头设置 Cookie。
您还可以使用 JavaScript 和 document.cookie
方法创建 Cookie。
请试用演示版:javascript-cookie.glitch.me/。
了解详情:文档:Cookie 属性。
为什么需要 Cookie?
1994 年,工程师 Lou Montulli 就职于软件公司 Netscape,该公司后来开发了 90 年代中期最流行的网络浏览器。与此同时,电信公司 MCI 正尝试为世界上最早的网店之一构建购物车功能。MCI 与 Montulli 联系,说明了他们遇到的问题。为了解决这个问题,Montulli 为 HTTP 添加了一项功能,让网站能够在用户的网络浏览器中存储少量文本、名称和值,例如 cart-id=123
。他将其称为“Cookie”,因为在当时,程序员会使用“魔法 Cookie”一词来指代数据通信中包含的一小段额外信息。
Lou 不到一周就完成了 HTTP Cookie 工作。他当时还不知道,Cookie 对广告、登录、付款、欺诈检测和其他关键 Web 服务至关重要。Cookie 是一种非常简单的技术,但却产生了深远的副作用。
Cookie 的用途
Cookie 可让浏览器存储少量用户信息,以便在多次请求中“记住”某些内容。Cookie 有多个用途:
- 会话管理
允许网站识别用户,例如在不同网页中保持已登录状态。 - 个性化
存储用户偏好设置(例如语言、主题或最近查看的内容),以便自定义网站体验。 - 跟踪
过去,Cookie 一直被用于跨网站跟踪用户行为,以便投放定向广告和用于其他用例。
相反,Cookie 通常用于存储和传达由服务器处理的标识符。例如,包含对网站分析服务的请求的标头可能会包含如下 Cookie:
Cookie: _analytics=ANALYTICS1.2.34567890.123456789
接收请求的分析服务器可以处理该标识符以及与网页相关的其他信息。