JavaScript 与 Cookies

你好，未来的 JavaScript 巫师们！今天，我们将踏上一段美味的旅程，探索 Cookies 的世界。不是那种可以蘸牛奶吃的（虽然我现在很想来一个），而是让我们的网络体验更加顺畅和个性化的数字 Cookies。所以，系上你的虚拟围裙，让我们开始烘焙……我是说，编程！

什么是 Cookies？

Cookies 是网站存储在用户计算机上的小数据片段。可以把它们想象成网站贴在计算机上的小数字便利贴，用来记住关于你的信息。这些“便利贴”可以包含各种信息，比如你的偏好设置、登录信息或者购物车中的商品。

当我第一次听说 Cookies 时，我想象了微小的计算机小精灵在写便条，然后把它们塞进我的电脑里。虽然实际工作原理并非如此，但这确实是一个很好的形象化概念！

为什么需要 Cookies？

你可能会有疑问：“为什么网站不能不依赖这些 Cookie 东西来记住东西？”让我给你讲一个小故事。

想象一下你在一个忙碌的咖啡馆里。你点了一杯咖啡和一个三明治，然后你需要去洗手间。当你回来时，咖啡师怎么知道哪一份订单是你的？在数字世界中，Cookies 就派上用场了。

Cookies 有以下几种用途：

1. 记住用户偏好
2. 保持用户登录状态
3. 跟踪购物车中的商品
4. 个性化用户体验
5. 分析用户行为以进行改进

没有 Cookies，每次你访问网站，就像第一次见面一样——没有记住你的偏好，没有保存的登录信息，购物车中也没有商品。不是很方便，对吧？

它是如何工作的？

现在，让我们揭开引擎盖，看看这些数字 Cookies 究竟是如何工作的。别担心，这可能听起来很复杂，但实际上并不难！

当你访问一个网站时，它可以向你的浏览器发送一个 Cookie。然后你的浏览器将这个 Cookie 存储在你的计算机上。下次你访问同一个网站时，你的浏览器会将 Cookie 发送回网站。这就像你的计算机和网站之间的秘密握手。

以下是一个简单的示意图：

用户访问网站
↓
网站发送 Cookie
↓
浏览器存储 Cookie
↓
用户重新访问网站
↓
浏览器发送 Cookie
↓
网站识别用户

现在我们了解了基础知识，让我们卷起袖子，开始在 JavaScript 中使用 Cookies！

设置/存储 Cookies

设置一个 Cookie 就像留下一个便条供以后查看。在 JavaScript 中，我们使用 document.cookie 属性来创建一个 Cookie。以下是如何操作的：

document.cookie = "username=John Doe";

让我们分解一下：

• document.cookie 是我们用来与 Cookies 交互的属性。
• "username=John Doe" 是实际的 Cookie。它是一个键值对，其中 username 是键，John Doe 是值。

你也可以设置多个 Cookies：

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

每个 document.cookie 语句都会创建一个新的 Cookie。它不会覆盖现有的 Cookies。

读取 Cookies

读取 Cookies 就像翻阅你留下的便条。以下是如何读取 Cookies：

let allCookies = document.cookie;
console.log(allCookies);

这会给你一个包含所有 Cookies 的长字符串。但通常，你只想获取一个特定的 Cookie 值。以下是一个函数，用于执行此操作：

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// 使用方法
let username = getCookie("username");
console.log(username); // 输出：John Doe

这个函数拆分 Cookie 字符串，循环遍历每个 Cookie，如果找到匹配项，则返回值。

设置 Cookies 的过期日期

Cookies 像牛奶一样——如果放得太久，就会变质。默认情况下，Cookies 在浏览器会话结束时过期。但你可以设置一个特定的过期日期：

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

这个 Cookie 将在一个月后过期。expires 属性告诉浏览器何时删除 Cookie。

删除 Cookie

有时，你需要丢弃一个 Cookie。要删除一个 Cookie，你可以将它的过期日期设置为一个过去的日期：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

这会将 Cookie 的值设置为空，并将过期日期设置为过去的时间，从而有效地删除它。

更新 Cookie

更新一个 Cookie 就像再次设置它，但赋予一个新的值：

document.cookie = "username=Jane Doe";

如果已经存在一个名为 "username" 的 Cookie，这将更新它的值。如果不存在，它将创建一个新的 Cookie。

Cookie 方法表

以下是我们学到的方法的便捷表格：

操作	方法
设置 Cookie	document.cookie = "key=value";
读取所有 Cookies	let allCookies = document.cookie;
读取特定 Cookie	使用 getCookie() 函数
设置过期日期	document.cookie = "key=value; expires=date";
删除 Cookie	将过期日期设置为过去的时间
更新 Cookie	再次设置 Cookie 并赋予新的值

就这样，伙计们！你现在已经掌握了在 JavaScript 中使用 Cookies 的知识。记住，能力越大，责任越大。始终尊重用户隐私，并在使用 Cookies 时保持透明。

下次你在网上冲浪时，如果一个网站记住了你的偏好设置，你可以会心一笑，想：“啊，Cookies 在起作用！”祝编程愉快，愿你的数字 Cookies 总是新鲜，真实的 Cookies 总是美味！

Credits: Image by storyset