什么是 Cookies 以及如何使用 JavaScript 处理它们

? ? ? 这样还不错… ??? 更好！饼干 ? 是网络上最受欢迎的表情符号之一，也是网络上最重要的技术之一。

让我们来看看这到底是怎么回事，好吗？

浏览器 Cookie 的基础知识

浏览器 Cookie 是为了保存有关用户的持久信息而引入的。最初的用例是检查用户是否已经访问过 Netscape 的网站。

Cookie 是具有名称字段、值字段和其他可选属性的字符串。值是字符串，您可以存储您认为最适合您的应用程序的任何内容。Google Analytics 的 _ga 可能是最常见的 Cookie 之一，它通常是这样的：

• 名称: _ga
• 值: GA1.3.210706468.1583989741
• 域: .example.com
• 路径: /
• 过期时间 / 最大年龄: 2022-03-12T05:12:53.000Z

Cookie 可以存储多达 4096 字节的数据（包括名称、值、域、到期日期和您可以放入其中的任何其他内容）。您可以为每个域添加有限数量的 Cookie，具体取决于您的浏览器。

如何创建Cookies

创建Cookies有两种主要方式：

• 通过HTTP，您可以在HTTP响应头中发送Set-Cookie。根据您为Web服务器使用的技术，您可以使用不同的工具和库来管理Cookie头。这些工具应该创建类似以下的HTTP响应：

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

您可以向您的Cookies添加信息，如过期日期，以及安全特性，如Secure指令和HttpOnly标志。

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

HttpOnly标志意味着浏览器无法读取或修改Cookie。而Secure意味着Cookie只能通过HTTPS传输。这对保护您的应用程序非常重要。

• 使用Javascript来管理Cookies有点棘手。我们有一个接口document.cookie，它存储我们的Cookies并可以重新赋值。例如，在安装了Google Analytics的网站上，在开发者控制台中，我们可以执行：

console.log(document.cookie)
// 记录类似 "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741" 的内容

// 等号的作用不是你期望的那样
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// 记录 "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// 请注意，前面的代码片段会追加我们创建的新 cookie

// Cookie 接口的一个粗略实现可能是这样的:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// 对于真正的更新，我们首先会检查 cookie 是否存在
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Cookie 类型

会话 cookie

会话 cookie 通常指的是存在直到浏览器关闭的一种 cookie 类型。要设置会话 cookie，只需不指定任何过期日期。

例如，您可以在 cookie 中存储用户的姓名。有访问权限的人将能够访问用户的姓名。由于它在 cookie 中，我们不需要将其添加到我们的请求中。

持久Cookie

持久Cookie在用户关闭浏览器时不会被删除。 这些Cookie有一个您可以在服务器上设置的到期日期。 您可以设置Cookie在一天或十年后到期。

第三方Cookie

我们可以区分来自同一域的Cookie和来自第三方提供者的Cookie。 我们之前提到的Google Analytics的例子就是第三方Cookie的一个例子。 第三方Cookie可用于跟踪用户活动。 要设置第三方Cookie，您必须设置';domain=thirdpartydomain.com'。

Cookie的Max-Age vs到期时间

Cookie通常是临时的，所以您可能希望设置一个精确的到期日期。 您有两种策略:

• 使用Expires并设置固定的过期日期。日期使用HTTP日期格式：<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT。所以例如，如果我们想让我们的cookie在2020年9月17日过期，我们可以这样做：

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• 使用“Max-Age”不受每个浏览器支持。但这是最可靠的解决方案。它强制使cookie在客户端接收后的一段时间（以秒为单位）过期：

// 一天后过期
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? 就是这样了！希望现在你对如何在客户端使用JavaScript处理cookie有了更好的了解。如果有任何问题，请在Twitter上询问我们。下次，我们将看到如何使用cookie和Express.js管理会话。