HTTP Cookie 简介

我听说英国人用饼干代替曲奇……很奇怪。

好的，让我们集中注意力。

什么是 Cookie

Cookie，更确切的说法是 HTTP Cookie，是存储在浏览器中以文本文件形式保存的小块数据。Cookie 将这些数据与特定用户关联起来。

Cookies主要用于三个目的：

会话管理

登录、购物车、游戏分数或服务器应该记住的任何其他内容。

个性化

用户偏好、主题和其他设置。

例如，可以保存用户的偏好（如语言和首选主题）以供将来的会话使用。

追踪

记录和分析用户行为。

当用户访问购物网站并搜索商品时，该商品会被保存在用户的浏览器历史记录中。Cookie 可以读取用户的浏览历史记录，以便在用户下次访问时显示类似的商品。

Cookie 类型

会话 Cookie

会话 Cookie，也称为“临时 Cookie”，可帮助网站识别用户及其在网站导航时提供的信息。会话 Cookie 仅在用户访问网站期间保留其活动信息。一旦关闭网络浏览器，这些 Cookie 就会被删除。

永久性 Cookie

永久性 Cookie 也称为“持久性 Cookie”。即使网络浏览器关闭后，它们仍然有效。例如，它们可以记住登录信息和密码，这样网络用户就无需在每次使用网站时重新输入。

第三方 Cookie

第三方 Cookie 由第三方安装，旨在收集网络用户的某些信息，用于研究例如行为、人口统计或消费习惯等。广告商通常使用它们来确保产品和服务面向正确的目标受众进行营销。

Flash Cookie

Flash Cookie 又被称为“超级 Cookie”。它们独立于网络浏览器，旨在永久存储在用户的计算机上。即使所有 Cookie 从网络浏览器中删除后，这些类型的 Cookie 仍会保留在用户的设备上。

僵尸饼干

僵尸 Cookie 是一种 Flash Cookie，用户删除后会自动重新创建。这意味着它们难以检测或管理。它们通常用于在线游戏中，以防止用户作弊，但也被用来在用户设备上安装恶意软件。

安全 Cookie

只有 HTTPS 网站才能设置安全 Cookie，即数据加密的 Cookie。大多数电子商务网站的结账或支付页面都设置了安全 Cookie，以提升交易安全性。同样，出于安全考虑，网上银行网站也被要求使用安全 Cookie。

使用 Vanilla JavaScript 创建 Cookie

注意：为了使下面的代码能够工作，您的浏览器必须启用本地 cookie 支持。

JavaScript 可以使用 document.cookie 属性创建、读取和删除 cookie。

使用 JavaScript，可以像这样创建 cookie：

document.cookie = "name=Linda Ojo";

您还可以添加到期日期（UTC 时间）。默认情况下，浏览器关闭时会删除 Cookie：

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC";

使用 path 参数可以告诉浏览器该 Cookie 属于哪个路径。默认情况下，该 Cookie 属于当前页面。

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";

仅使用原生 JavaScript 处理 Cookies 很快就会变得非常繁琐，这就是为什么我更喜欢使用JavaScript Cookie 包

使用JavaScript Cookie 包处理 Cookie

JavaScript Cookie 是一个简单轻量级的 JavaScript API，用于处理 Cookie。它适用于所有浏览器，接受任何字符，经过严格测试，并且没有任何依赖。太棒了！

安装

在根文件夹中运行以下命令来安装 js-cookies。

npm install js-cookie --save

Cookie 属性

创建 Cookie

我们可以通过提供如下所示的名称和值来创建一个在整个网站有效的 cookie。

import Cookies from 'js-cookie';

Cookies.set('name', 'value');

我们可以通过传递一个包含剩余天数的对象作为该方法的第三个参数来指定 Cookie 的过期时间Cookie.set。下面创建的 Cookie 将在 7 天后过期。默认情况下，用户关闭浏览器时 Cookie 会被删除。

import Cookies from 'js-cookie';

Cookies.set('name', 'value', { expires: 7 });

接下来，我们可以创建一个安全的过期 Cookie，它仅对当前页面的路径有效。该路径会被添加到上一个包含过期日期的对象中。

Cookies.set('name', 'value', { expires: 7, path: '', secure: true });

读取cookie

创建 Cookie 的目的是为了以后可以使用它们。我们可以用该Cookie.get方法访问已经存在的 Cookie。让我们创建并读取一个名为“theme”的真实 Cookie。

import Cookies from 'js-cookie';

Cookies.set('theme', 'dark');
Cookies.get('theme') // => 'dark'

您还可以通过覆盖其值来更新 Cookie

Cookies.set('theme', 'light');

现在主题 cookie 的值为“light”。

Cookies.get我们可以通过调用方法而不传递任何参数来一次获取所有存在的 cookie，如下所示。

Cookies.get(); // => { theme: 'light' }

删除 Cookie

Cookie.remove您可以使用第一个参数运行该方法来删除全局可访问的 cookie，该参数是value

Cookies.remove('theme');

注意：当删除 cookie 并且不依赖默认属性时，您必须传递用于设置 cookie 的完全相同的路径和域属性。
让我们以设置和删除对当前页面路径有效的 cookie 为例。

Cookies.set('direction', 'north', { path: '' });
Cookies.remove('direction'); // fail!
Cookies.remove('direction', { path: '' }); // removed!

就这些了，大家。阅读我的更多文章