如何在JavaScript中使用Cookie

WBOLT_COM 12 月 06, 2023 253 0

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

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

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

Cookie 的类型

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

会话 Cookie：当您访问网站时，网站会给您一个会话 Cookie。这种 cookie 是您访问该网站时的短期记忆。它们存储在浏览器的内存中，关闭时会被删除。它们的持续时间与您在网站上的会话时间相同。一旦您关闭浏览器，它们就会消失，就像您看完书后擦掉石板一样。
持久 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 数据的过程：

访问 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 删除是网络开发的一个重要方面，可让开发人员有效管理用户数据和隐私。在 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 名称、值、域、路径、过期时间和其他属性。
过滤 Cookie：DevTools 允许您按域过滤 Cookie。这在处理有许多 cookie 的网站时非常有用。使用过滤选项可缩小列表范围，并专注于特定的 Cookie。
删除 Cookie：要删除 cookie，请右键单击列表中的 cookie 并选择 “删除 “或使用底部的 “删除 “按钮。此操作将从浏览器中删除 cookie。

浏览器开发者工具删除cookie

小结

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

评论收藏点赞(1)