ES6 Cookie

Cookie 可以定义为一小段文本，浏览器将其存储在用户的计算机中。 Cookie 是一种客户端存储的旧机制，旨在用于服务器端脚本语言，如 ASP、php 等。

主要地，cookie 用于跟踪信息，如用户偏好，当用户重新访问网站时可以检索这些信息以个性化页面。 Cookie 也可以由 JavaScript 直接创建、修改和访问，但这样做的过程有些复杂。

为什么需要 Cookie？

服务器和 Web 浏览器使用 HTTP 协议 (无状态协议) 进行通信。 HTTP 是一种无状态协议，因此在 Web 服务器处理完初始客户端请求后，它不会记住客户端所做的任何设置。 它独立处理每个请求。 因此，服务器在将数据发送到浏览器后不会跟踪数据。 但在许多情况下，数据会再次被需要。

客户端和服务器之间的这种请求-响应周期称为会话。 Cookie 是浏览器用于存储数据（指用户的会话）的默认机制。

注意：不要将您的敏感数据（如密码和信用卡信息）保存在 cookie 中，因为恶意用户可能会使用它。

Cookie 如何工作？

服务器以 cookie 的形式向用户的浏览器发送一些数据。 浏览器可能会接受 cookie。 如果接受，它将作为纯文本记录存储在用户的硬盘上。 现在，当用户访问同一网站的另一个页面时，浏览器会将相同的 cookie 发送到服务器进行检索。 检索后，相应的服务器会记住之前存储的内容。

Cookie 是包含五个可变长度字段的纯文本数据记录

• 名称和值： Cookie 的设置和检索采用 键值 形式
• 域： 它是网站的域名。
• 路径： 它包括设置 cookie 的网页或目录。 如果您需要从任何页面或目录检索 cookie，则可以为空。 它的默认值是当前页面的路径。
• 安全： 顾名思义，cookie 可以通过安全服务器检索。 如果此字段为空，则不需要此类限制。
• 过期： 这是 cookie 过期的日期。 如果此字段为空，则 cookie 将在用户退出浏览器时过期。

最初，cookie 是为 CGI (公共网关接口) 编程设计的。 cookie 中的数据在 Web 服务器和 Web 浏览器之间自动传输。 因此，服务器上的 CGI 脚本可以读取和写入存储在客户端的 cookie 的值。

在 JavaScript 中，我们可以使用 document 对象的 cookie 属性来操作 cookie。 我们还可以创建、读取、删除和修改应用于当前页面的 cookie。

存储 Cookie

创建或存储新 cookie 的最简单方法是将 name = value 字符串值赋给 document.cookie 对象。 它看起来像这样

上述语法中的 expire 属性是可选的。 如果我们手动为此属性提供有效的日期和时间，则 cookie 将在给定的日期和时间过期。

cookie 的值不能包含空格、逗号或分号。 因此，我们将需要使用 escape() 函数（JavaScript 的内置函数）对包含这些字符的值进行编码，然后将其存储在 cookie 中。 同样，我们还需要使用相应的 unescape() 函数 来读取 cookie 值。

默认情况下，上述 cookie 的生存期是当前浏览器会话。 这意味着它将在用户退出浏览器时丢失。

Cookie expires 属性

您可以使用 expires 属性指定 cookie 的生存期。 此属性提供了一种创建持久 cookie 的方法。 这里，时间和日期的声明表示 cookie 的活动期。 一旦声明的时间过去，cookie 将自动删除。

例如

Cookie max-age 属性

为了创建一个在当前浏览器会话之外仍然存在的 cookie，我们需要指定它的生存期（以秒为单位）。 我们还可以使用 max-age 属性来指定它。 它是 expires 属性的替代方案，它指定 cookie 从当前时刻开始的过期时间（以秒为单位）。 此属性确定 cookie 的生存期，即它可以在用户的系统上保留多长时间才会被删除。

如果 max-age 属性的值为 零 或 负数，则 cookie 将被删除。

例如：以下 cookie 的生存期为 30 天。

存储 Cookie 的示例

让我们尝试通过以下示例来理解设置 cookie 的说明

输出

成功执行上述代码后，您将获得以下输出。

如果 textfield 为空，并且您单击 setCookie 按钮，您将收到一条警报，如下图所示。

一旦您输入了所需的值并单击 setCookie 按钮，您将看到以下输出。

读取 Cookie

读取 cookie 比设置 cookie 稍微复杂一些，因为 document.cookie 属性返回一个字符串，其中包含以空格和分号分隔的所有 cookie 的列表。 您可以在需要访问 cookie 的任何地方使用此字符串。

要从列表中获取 cookie，您可以使用字符串的 split() 函数，将字符串分解为键和值的形式。

示例

更新 Cookie

在 JavaScript 中，您可以通过用新值覆盖 cookie 来以与创建 cookie 相同的方式更改 cookie。 更新或修改 cookie 的唯一方法是创建另一个 cookie。 如果您创建的 cookie 名称相同，但路径与现有 cookie 的路径不同，则会导致添加新 cookie。

示例

删除 Cookie

在某些情况下，您可能想要删除 cookie。 删除 cookie 的过程非常简单。 您不需要指定 cookie 的值来删除它。 为此，您需要将 'expires' 属性的值设置为过去的日期。

您可以在以下代码中看到相同的说明