什么是Cookie？有哪些类型？如何创建、读取和删除？

本文正在参与【[ 面霸养成记 ] 】 征文活动，一起来聊聊校招的那些事吧，牛客周边和百元京东卡等你来领~

什么是Cookies？

Cookie，更恰当地称为 HTTP Cookie，是在浏览器上存储为文本文件的一小部分数据。Cookie 将数据位与特定用户相关联。

Cookies主要用于三个目的：

会话管理

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

个性化

用户首选项、主题和其他设置。

例如，可以保存用户的偏好，例如语言和首选主题，以备将来使用。

追踪

记录和分析用户行为。

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

Cookie 的类型

Session cookie(会话 cookie)

会话 cookie，也称为“临时 cookie”，可帮助网站识别用户以及用户浏览网站时提供的信息。会话 cookie 仅在用户在网站上时保留有关用户活动的信息。一旦网络浏览器关闭，cookies 就会被删除。

Permanent cookies(永久 cookies)

永久 cookie 也称为“持久 cookie”。即使在 Web 浏览器关闭后，它们仍会继续运行。例如，他们可以记住登录详细信息和密码，因此网络用户无需在每次使用网站时重新输入。

Third-party cookies(第三方 cookie)

第三方 cookie 由第三方安装，目的是从网络用户那里收集某些信息，以对行为、人口统计或消费习惯等进行研究。它们通常由希望确保产品和服务面向正确的目标受众进行营销的广告商使用。

Flash cookie(快闪 cookie)

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

Zombie cookie(僵尸 cookie)

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

Secure Cookie(安全 Cookie)

只有 HTTPS 网站可以设置安全 cookie，即带有加密数据的 cookie。大多数情况下，电子商务网站的结账或支付页面都有安全的 cookie，以促进更安全的交易。同样，出于安全原因，网上银行网站也需要使用安全 cookie。

使用 Vanilla JavaScript 创建 Cookie

注意：要使下面的代码起作用，你的浏览器必须启用本地 cookie 支持。

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

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

document.cookie = "name=haiyong";

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

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

使用 path 参数，可以告诉浏览器 cookie 所属的路径。默认情况下，cookie 属于当前页面。

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

仅使用普通 JavaScript 处理 Cookie 会很快变得乏味，这就是我更喜欢使用JavaScript Cookie Package的原因

使用JavaScript Cookie Package处理Cookie

JavaScript Cookie 是一个简单的轻量级 JavaScript API，用于处理 cookie。它适用于所有浏览器，接受任何字符，经过大量测试并且不需要依赖项。惊人的！

安装

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

npm install js-cookie --save

Cookie 属性

• Expire：定义 cookie 将被删除的时间。值可以是一个数字，它将被解释为从创建之日起的天数或一个 Date 实例。
• Path：一个字符串，表示cookie可见的路径。
• Domain：一个字符串，指示 cookie 应该可见的有效域。该 cookie 也将对所有子域可见。
• Secure：true 或 false，指示 cookie 传输是否需要安全协议 (https)。

创建一个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 。让我们创建并读取一个名为“主题”的真实 cookie。

import Cookies from 'js-cookie';
Cookies.set('theme', 'dark');
Cookies.get('theme') // => 'dark'

你还可以通过覆盖其值来更新 cookie

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

现在主题 cookie 的值为 'light'。

我们可以通过调用Cookies.getmethod 而不传入任何参数来一次获取所有 cookie ，如下所示。

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

删除cookie

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

Cookies.remove('theme');

注意：当删除 cookie 并且你不依赖默认属性时，你必须传递用于设置 cookie 的完全相同的路径和域属性。

我们以设置和删除一个对当前页面路径有效的cookie为例。

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

以上就是本篇文章所有内容

最后，不要忘了❤或📑支持一下哦，你的支持是海海更新的动力！关注我后面会持续分享面试经验 & 前端相关的专业知识。

最后祝大家都能找到满意的实习和 offer！