不是很... 更好的! Cookie 是网页上最喜欢的表情符号之一,也是网页上最重要的技术之一。
让我们来看看它是关于什么,我们会吗?
浏览器 Cookie 的基本知识
浏览器 Cookie 被引入到网络中,以保持用户的永久性信息. 第一种用例是检查用户是否已经访问了 Netscape 网站。
Cookie 是具有名称字段、值字段和额外的可选属性的字符串,这些值是字符串,您可以存储您认为适用于您的应用程序的任何内容。Google Analytics _ga 可能是其中一个最常见的cookie,它通常看起来像这样:
- 名称: _ga
- 值: GA1.3.210706468.1583989741
- 域:.example.com
- 路径: /
- 到期 / 最高年龄: 2022-03-12T05:12:53.000Z
Cookie 可以存储高达 4096 个字节的数据(包括姓名、值、域名、到期日期和其他任何你可以插入的内容)。
Cookie是如何创建的
有两种主要方式来创建Cookie:
- 使用 HTTP,您可以在您的 HTTP 响应标题中发送
Set-Cookie。 根据您正在使用的 Web 服务器的技术,您可以使用不同的工具和库来管理 Cookie 标题,这些工具应该创建 HTTP 响应,大致看起来像这样:
1HTTP/2.0 200 OK
2Content-type: text/html
3Set-Cookie: alligator_name=barry
4Set-Cookie: tasty_cookie=strawberry
5... More http Content
您可以将信息添加到您的cookie中,例如到期日期和安全功能,如安全指令和HttpOnly旗帜。
1Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly
HttpOnly 标志意味着 Cookie 无法被浏览器读取或修改,Secure 意味着 Cookie 只能通过 HTTPS 传输。
- 使用 JavaScript 管理 Cookie 更难一些. 我们有一个界面,即「document.cookie」,它存储我们的 Cookie 并可重新分配。例如,在安装了 Google Analytics 的网站上,在开发者控制台中,我们可以这样做:
1console.log(document.cookie)
2// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"
3
4// This equal sign does not work as you expect
5document.cookie = "alligator=alligator_cookie_content;"
6console.log(document.cookie)
7// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
8// Notice that the previous piece of code appends the new cookie we created
9
10// A rough implementation of a cookie interface could look like this:
11const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
12// For a real update we would first check if the cookie exists
13const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
14const 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 通常是临时的,所以您可能想要设置一个准确的到期日期。
- 使用
到期并设置固定的到期日期。日期使用HTTP日期格式:<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT。
1const jacksBirthday = new Date(2020, 8, 17);
2document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';
- 使用
Max-Age不是每个浏览器都支持的,但它是最合适的解决方案,它迫使cookie在客户端接收后(在几秒钟内)过期
1// Expires after one day
2const oneDayToSeconds = 24 * 60 * 60;
3document.cookie = 'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';
这就是它!我希望你现在能够更好地了解如何使用JavaScript的客户端cookie。如果您有任何问题,请在Twitter上询问我们。下次,我们将看到如何使用cookie和Express.js来管理会话。