什么是Cookies？
- 会话管理
- 个性化
- 追踪
Cookie 的类型
- Session cookie(会话 cookie)
- Permanent cookies(永久 cookies)
- Third-party cookies(第三方 cookie)
- Flash cookie(快闪 cookie)
- Zombie cookie(僵尸 cookie)
- Secure Cookie(安全 Cookie)
使用 Vanilla JavaScript 创建 Cookie
使用JavaScript Cookie Package处理Cookie
- 安装
- Cookie 属性
- 创建一个cookie
- 读取cookie
- 删除cookie

我听说英国人用biscuits代替cookies……很奇怪。

好吧，让我们开始对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!

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

最后，不要忘了❤或

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

第一个ASP.net的CRED（创建读取编辑删除）页面
折腾了2天,终于搞出来了. 要是有书或者老师带的话估计10分钟就搞定了,哎,自学的就是这样啊前一篇记录了如何引用Entity Framework 的Context类. 但是如何搞定数据库呢?教程里面 ...
【SAP技术】SAP MM 如何看一个自定义移动类型是复制哪个标准移动类型而创建的？
[SAP技术]SAP MM 如何看一个自定义移动类型是复制哪个标准移动类型而创建的? 比如项目上有一个自定义移动类型Z59,是复制551移动类型而定义的. OMJJ配置界面里,是有一个Ref字段.如下 ...
jquery页面跳转带cookie_JS 如何创建、读取和删除cookie
Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可 ...
数据加密类型及创建和申请CA证书
数据加密类型及创建和申请CA证书 1.数据在互联网上传输必须保证以下3点特性: 私密性: 数据加密完整性: 数据传输过程没有被人修改身份验证: 确认对方的身份,防止中间人伪装*** 2.私密 ...
mysql介绍索引类型的章节_mysql索引总结--mysql索引类型以及创建的详细介绍
关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车.对于没有索引的表,单表查询可能几十万数据就是瓶颈,而通常大型 ...
coreldraw x8里线段显示尺寸_CorelDRAW X8快速更换纸张类型和创建自定义的页面尺寸...
CorelDRAW中有两种指定页面尺寸的选择,包括选择预设页面尺寸,以及创建您自己的页面尺寸.可以从众多预设页面尺寸中进行选择,范围从法律公文纸与封套到海报与网页.如果预设页面尺寸不符合您的要求,可以 ...
JIRA-使用教程_问题类型_创建、方案配置
博客概要简单分享如何在JIRA自定义配置问题类型~ 文章目录博客概要 <JIRA-使用教程>_总目录问题类型创建过程 1.JIRA管理 2.问题类型 3.问题类型方案 4.成果展示 ...
matlab 结构体单元数组,matlab结构体、数组和单元数组类型的创建
matlab结构体.数组和单元数组类型的创建 @ matlab结构体类型通过字段赋值创建结构体创建格式: 结构体名称.字段名称样例: >> student.name='Alan'; ...
oracle 建表字段设置,Oracle创建表、删除表、修改表（添加字段、修改字段、删除字段）语句总结...
关于Oracle创建表.删除表.修改表(添加字段.修改字段.删除字段)语句的简短总结. Oracle创建表: create table 表名 ( 字段名1 字段类型默认值是否为空 , 字段名2 字 ...

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

目录