JavaScript - Cookie 属性

你好，有抱负的网页开发者们！今天，我们将踏上一段甜蜜的旅程，探索cookies的奥秘。不，不是指巧克力曲奇（虽然我也希望是！），而是那些让我们的网络体验更加顺畅和个性化的数字cookies。所以，拿起你的虚拟牛奶，让我们一起沉浸在JavaScript Cookie属性的甜美话题中！

Cookie 属性

在我们深入细节之前，先来了解一下cookie属性是什么。想象一下cookies是你浏览器关于你的小纸条。Cookie属性就像是这些纸条上的特殊说明，告诉浏览器如何处理它们。它们对于安全性、功能性和用户体验至关重要。

以下是我们将要讨论的主要cookie属性快速概览：

属性	描述
名称/值	Cookie的核心数据
路径	指定服务器上哪些路径可以访问cookie
过期时间	为cookie设置一个过期日期
最大寿命	定义cookie应该持续多长时间
域名	确定哪些域名可以使用cookie

在浏览器中检查属性值

在我们开始设置cookies之前，先来学习如何检查它们。打开你的浏览器的开发者工具（通常是F12），进入Application或Storage标签页，找到Cookies。就像窥探饼干罐一样！

// 设置一个简单的cookie
document.cookie = "username=John Doe";

// 在控制台中检查
console.log(document.cookie);

当你运行这段代码并在控制台中检查时，你会看到"username=John Doe"。设置和读取一个基本的cookie就这么简单！

Cookie的名称/值属性

名称/值对是cookie的核心。它就像一个键和它对应的宝藏。

// 设置一个带有名称和值的cookie
document.cookie = "favoriteColor=blue";

// 设置多个cookie
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";

// 读取cookie
console.log(document.cookie);

这将输出所有的cookie。记住，每次document.cookie的赋值都会添加一个新的cookie，而不是覆盖现有的！

Cookie的路径属性

路径属性决定了你的网站上的哪些页面可以访问cookie。它就像告诉cookie它可以进入你的网站之家的哪些房间。

// 为特定的路径设置一个cookie
document.cookie = "user=Alice; path=/dashboard";

// 为整个网站设置一个cookie
document.cookie = "theme=dark; path=/";

在这个例子中，"user" cookie只能在"/dashboard"路径及其子路径中访问，而"theme" cookie在整个网站上都可以使用。

Cookie的过期属性

过期属性设置了一个特定的日期，cookie应该在那天被删除。这就像在牛奶上标注一个过期日期！

// 设置一个7天后过期的cookie
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();

这个cookie将在7天后自我销毁。任务不可能，cookie风格！

Cookie的最大寿命属性

最大寿命属性设置cookie应该持续多长时间，单位是秒。它就像给你的cookie设置一个倒计时定时器。

// 设置一个持续1小时的cookie
document.cookie = "session=active; max-age=3600";

// 设置一个立即删除的cookie
document.cookie = "tempData=123; max-age=0";

第一个cookie将持续一小时，而第二个cookie就像一个自我销毁的信息——一旦创建就消失了！

Cookie的域名属性

域名属性指定哪些域名可以访问cookie。这就像决定哪些朋友可以分享你的秘方。

// 为当前域名及其所有子域名设置一个cookie
document.cookie = "language=en; domain=.example.com";

// 为确切的域名设置一个cookie
document.cookie = "userId=12345; domain=shop.example.com";

在第一个例子中，cookie可以在example.com及其所有子域名（如blog.example.com）上访问。第二个cookie只针对shop.example.com。

现在，让我们在更复杂的例子中将它们全部放在一起：

function setCookie(name, value, days, path, domain, secure) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires +
(path ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}

// 使用
setCookie("username", "JohnDoe", 7, "/", "example.com", true);

这个函数允许你设置我们讨论过的所有属性的cookie。它就像一个用于创建cookie的瑞士军刀！

记住，cookies是强大的工具，但权力越大，责任越大。在使用cookies时，始终要注意用户隐私和安全。

就这样，伙计们！你现在已经完全准备好在JavaScript中处理cookies了。下次你在网上浏览并发现它记住你的偏好时，你就会知道背后的甜蜜秘密了。快乐编码，愿你的cookies永远新鲜和安全！

Credits: Image by storyset