如何在JavaScript中使用Cookie

您是否想过网站是如何记住您的登录信息、购物车内容和其他偏好的？答案就是 cookie。本文将解释 Cookie 的类型、在 JavaScript 中使用 Cookie、何时使用 Cookie 以及最佳实践。

Cookie 通过在用户设备上存储少量信息，在增强网站用户体验方面发挥着重要作用。这些信息可以帮助网站记住用户的偏好和活动，使后续访问更加个性化。

Cookie 就像网站在你访问时留在电脑上的小纸条。这些笔记包含有关您访问的小信息，如用户名、语言偏好或您添加到购物车的商品。它们就像是网站的有用记忆。当你访问一个网站时，就像是在进行一次对话。你要告诉网站你的姓名、喜欢的语言和感兴趣的内容。网站会将这些信息写入 cookie，并安全地保存在你的设备上。在网络开发世界中，JavaScript 帮助这些 cookie 正常工作。

Cookie 的类型

Cookie 有不同的类型，每种类型都有其独特的作用，以提高您的浏览体验。了解 Cookie 的类型有助于你理解网站如何记住你的偏好和操作。让我们来看看两种主要类型：

1. 会话 Cookie：当您访问网站时，网站会给您一个会话 Cookie。这种 cookie 是您访问该网站时的短期记忆。它们存储在浏览器的内存中，关闭时会被删除。它们的持续时间与您在网站上的会话时间相同。一旦您关闭浏览器，它们就会消失，就像您看完书后擦掉石板一样。
2. 持久 Cookie：持久 Cookie 就像一本日记。它们会在更长的时间内记录你的偏好和操作。当你访问一个网站时，它可能会给你一个持久 Cookie，即使你离开后再返回，它也会一直跟着你。它们会记住你的偏好，确保网站能识别你，并根据你以前的访问情况定制你的体验。它们可以持续更长时间，由网站设定有效期。有些可以持续数年，有些则可能在几天或几周后失效。

何时使用 Cookie

Cookie 可用于不同的目的，但一般用于改善用户体验和提高网站效率。以下是何时使用 Cookie 的一些具体示例：

• 记住登录信息：Cookie 可用于记住用户的登录信息，这样用户就不必在每次访问网站时都输入登录信息。这对需要用户经常登录的网站（如电子邮件和社交媒体网站）很有帮助。
• 个性化用户体验：Cookie 可用于跟踪用户的偏好，如语言和时区，并显示与其兴趣相关的内容。例如，新闻网站可能会使用 Cookie 跟踪用户最喜欢的主题，并显示更多关于这些主题的文章。
• 跟踪购物车内容：它可用于跟踪用户已添加到购物车中的物品。如果用户离开网站后再返回，它可以让用户完成购物，而无需重新开始。
• 提高网站性能：Cookie 可用于缓存数据，减少向服务器发出请求的次数。它可以提高网站的加载速度，使网站的响应速度更快。
• 跟踪用户行为：它可以跟踪用户在不同网站上的浏览活动。这些信息可用于各种目的，如定向广告和网站分析。

属性

Cookie 可以有多种属性，用于控制 cookie 的使用方式和存储时间。最常见的 cookie 属性有：

• Name: cookie 的名称。它是 cookie 的标识符。
• Value: cookie 的值。它是存储在 cookie 中的数据。
• Domain: cookie 所属的域。这是设置 cookie 的网站。
• Path: Cookie 有效的域路径。这是 cookie 可以在网站上使用的部分。
• Expires: cookie 的过期日期和时间。在此日期和时间之后，cookie 将从用户电脑中删除。
• Secure: cookie 是否只能通过安全连接发送。只有当用户通过 HTTPS 连接到网站时，cookie 才会被发送。
• HttpOnly: 是否可以通过 JavaScript 访问 cookie。它有助于保护 cookie 不被恶意网站访问。

在 JavaScript 中使用 Cookie

在 JavaScript 中使用 Cookie 对于在客户端存储和管理数据至关重要。JavaScript 可以通过多种方式与 Cookie 配合使用。例如：

• 设置和创建 cookie
• 检索 cookie 数据
• 删除 cookie

设置和创建 Cookie

要设置或创建 cookie，我们需要向 document.cookie 属性分配一个字符串。该字符串通常包含 cookie 名称、其值和可选属性，如到期日期、域和路径。

设置 Cookie：

document.cookie = "username=ChisomKanu";

在这里，我们设置了一个简单的 “username” cookie，其值为 “ChisomKanu”。不过请注意，这个 Cookie 是会话 Cookie，即浏览器关闭后会被删除。

设置持久 Cookie：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);  // Cookie expires in 7 days
document.cookie = "username=ChisomKanu; expires=" + expirationDate.toUTCString();

我们通过指定过期日期来设置持久 Cookie。Cookie 将保存七天，即使浏览器关闭后重新打开也是如此。

创建 Cookie 函数：为了简化 Cookie 创建过程并使其更易于重复使用，可以创建一个函数：

function setCookie(name, value, daysToExpire) {
const date = new Date();
date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; path=/";
}
// Usage:
setCookie("username", "ChisomKanu", 7); // Cookie will expire in 7 days

setCookie 函数接收 cookie 的名称、值和应持续的天数。它会计算到期日期，并相应地设置 cookie。

检索 Cookie 数据

让我们一步步分解获取 cookie 数据的过程：

• 访问 document.cookie ：首先，我们将访问 document.cookie 属性，该属性包含当前文档的所有 cookie。
• 分割 Cookie 字符串：然后使用 .split('; ') 方法将 document.cookie 字符串拆分成单个键值对。该方法根据分号和空格来分割 cookie。
• 创建 Cookie 对象：我们创建一个 JavaScript 对象来存储 cookie 数据。从 Cookie 字符串中提取的每个键值对都会作为属性添加到该对象中。
• 循环浏览 Cookie：我们遍历键值对数组，并使用 .split('=') 将每个键值对拆分为 cookie 名称和值。
• 填充 Cookie 对象：我们以 cookie 名称作为键，以其各自的值作为值，填充 cookie 对象。

让我们通过一个代码示例将这些步骤付诸实施：

function getCookies() {
const cookies = document.cookie.split('; ');
const cookieData = {};
for (let cookie of cookies) {
const [name, value] = cookie.split('=');
cookieData[name] = decodeURIComponent(value);
}
return cookieData;
}
const cookies = getCookies();
console.log(cookies);

getCookies 函数使用 .split('; ') 将 cookie 字符串分割成由单个 cookie 组成的数组。我们初始化一个空对象 cookieData，用于存储 cookie 的键值对。我们使用 for 循环遍历数组中的每个 cookie。我们使用 .split('=') 对每个 cookie 的名称和值进行分割。我们还使用 decodeURIComponent 来解码 cookie 值中的任何特殊字符。然后，我们以 cookie 名称作为键，以解码后的 cookie 值作为值，填充 cookieData 对象。最后，我们返回包含所有 cookie 信息的 cookieData 对象。

将 cookie 数据检索为 JavaScript 对象后，我们就可以使用各自的键访问单个 cookie 值了。

让我们用一个代码示例来说明使用检索到的 cookie 数据的过程：

function customizeUserExperience(cookies) {
if (cookies.username) {
console.log(`Welcome back, ${cookies.username}!`);
} else {
console.log('Welcome to our website!');
}
if (cookies.language) {
console.log(`Displaying content in ${cookies.language}.`);
// Additional logic to set the website language accordingly
}
}
// Assuming cookies is the cookie object retrieved earlier
customizeUserExperience(cookies);

customizeUserExperience 函数将检索到的 cookie 对象作为参数。它会检查 username cookie 是否存在。如果存在，则记录个性化欢迎信息。如果不存在，则会记录一条普通的欢迎信息。它还会检查语言 cookie 是否存在。如果存在，就会记录一条显示内容语言的信息。

还可以添加更多逻辑，以设置网站语言或根据其他检索到的 cookie 值定制用户界面。

Cookie 删除

Cookie 删除是网络开发的一个重要方面，可让开发人员有效管理用户数据和隐私。在 JavaScript 中，删除 Cookie 可以增强用户隐私或删除过时信息。删除 Cookie 时，它将从用户的设备中移除，浏览器将不再向服务器发送该 Cookie。Cookie 可以根据各种条件进行删除，如用户操作或不再需要某些数据时。

让我们看看使用 JavaScript 删除 cookie 的过程：

• 访问 document.cookie： 首先，我们访问 document.cookie 属性来操作 cookie 数据。
• 将有效期设置为过去： 要删除 cookie，我们要将其有效期设置为过去的某个日期。这样浏览器就会删除 cookie。
• 设置路径（如需要）： 如果 cookie 最初设置了特定路径，则删除时应使用相同路径，以保持一致性。

代码示例说明：

function deleteCookie(cookieName) {
document.cookie = `${cookieName}=; expires=Tue, 10 Oct 2023 00:00:00 UTC; path=/;`;
}

deleteCookie 函数将 cookie 名称作为参数。然后，函数会修改 document.cookie 属性，将指定 cookie 的有效期设置为过去的某个日期（2023 年 10 月 10 日）。path 属性被设置为”/”，以确保无论 cookie 的初始路径如何，都会被删除。

删除 cookie 时需要注意一些事项：

• 如果删除用于身份验证的 cookie，用户将退出网站。
• 如果删除用于个性化的 cookie，用户的偏好设置将被重置。
• 如果删除了网站的所有 cookie，用户下次访问网站时就必须重新登录并设置偏好。

如何使用 DevTools 检查 Cookie

网络开发人员经常使用浏览器 DevTools 来检查和分析网络应用程序的各个方面。作为网络开发的重要组成部分，Cookie 也可以使用 DevTools 进行检查。它使开发人员能够验证 Cookie 是否按预期进行设置、读取和删除。

首先，打开网络浏览器并导航到要检查 Cookie 的网页。进入网页后，可使用以下方法之一打开 DevTools：

• 右键单击并检查： 右键单击页面上的任何元素，然后从上下文菜单中选择 “检查” 或 “检查元素”。
• 键盘快捷键： 使用键盘快捷键Windows/Linux：Ctrl + Shift + I Mac：Command + Option + I 菜单：打开浏览器菜单（通常由三个垂直圆点或线条表示），转到 “更多工具”，然后选择 “开发工具”。

• 导航至 “应用” 选项卡： 打开 DevTools 后，导航至 “应用” 选项卡。该选项卡包含与应用数据相关的多个部分，包括 Cookie、本地存储、会话存储等。

要在 DevTools 中检查 Cookie，请按照以下步骤操作：

• 查看在 “应用” 选项卡中 Cookie，查找左侧边栏中的 “Cookie”。点击它将显示与当前网站相关的所有域。选择一个域即可查看其相关的 Cookie。

下图显示的是 google.com 的 cookies：

• Cookie 详情：点击特定 cookie 查看其详情。这包括 cookie 名称、值、域、路径、过期时间和其他属性。
• 过滤 Cookie：DevTools 允许您按域过滤 Cookie。这在处理有许多 cookie 的网站时非常有用。使用过滤选项可缩小列表范围，并专注于特定的 Cookie。
• 删除 Cookie：要删除 cookie，请右键单击列表中的 cookie 并选择 “删除 “或使用底部的 “删除 “按钮。此操作将从浏览器中删除 cookie。

小结

总之，需要注意的是，并非所有 cookie 都是一样的。有些 cookie 是网站正常运行所必需的，而另一些则用于跟踪和广告等不太重要的目的。不过，禁用 Cookie 可能会导致某些网站无法正常运行。Cookie 是改善用户体验的重要工具，但应谨慎使用。用户在访问网站时应了解自己接受的 Cookie 类型，并可选择禁用 Cookie。此外，禁用 cookie 可能会导致某些网站无法正常运行。网站应制定简洁明了的隐私政策，解释 cookie 的使用。开发人员应采取措施保护 cookie 不被攻击者窃取或修改。