JavaScript可以通过document.cookie属性实现Cookie的操作。主要操作包括：创建、读取、更新和删除Cookie。 其中创建和更新使用相同的方式，只需设置document.cookie属性即可，而删除则是通过设置Cookie过期时间为一个过去的时间点来实现。读取则通过对document.cookie字符串进行解析来完成。
创建和更新Cookie 的关键在于构造正确的字符串。比如，为了创建一个名为user的Cookie，其值为John Doe，且它在7天后过期，可以使用以下代码：
document.cookie = "user=John Doe; max-age=" + 60*60*24*7 + "; path=/";
在这个例子中，max-age属性设置了Cookie的生存周期，path属性定义了Cookie在哪个路径下可以访问。
一、创建COOKIE
Cookie的创建是通过将一个字符串赋值给document.cookie完成的。这个字符串通常包含了Cookie的名称、值和其他可选的属性，如expires、max-age、path、domAIn和secure。
设置COOKIE值
document.cookie = "username=John Doe";
这个最简单的Cookie设置例子会创建一个会话级Cookie，一旦浏览器关闭，这个Cookie就会被清除。
设置COOKIE的有效期
const now = new Date();
now.setTime(now.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "username=John Doe; expires=" + now.toUTCString();
在这段代码中，我们创建了一个名为username的Cookie，它将在7天后过期。
二、读取COOKIE
Cookie的读取是通过解析document.cookie属性来实现的。因为document.cookie对象是一个由分号加空格分隔的字符串，其中包含了页面所有的Cookie（name=value对），所以通常需要一些逻辑来解析这个字符串，提取出我们需要的Cookie值。
读取特定COOKIE
function getCookie(name) {
let cookieArray = document.cookie.split('; ');
for(let i = 0; i < cookieArray.length; i++) {
let cookiePair = cookieArray[i].split('=');
if(name == cookiePair[0]) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
该函数可以通过传入Cookie名称来获取对应的值，并对值进行了URL解码。
三、更新COOKIE
更新Cookie和创建Cookie几乎是一回事，区别仅在于是否该Cookie已存在。如果我们要更新Cookie的值或过期时间，我们只需要再次设置document.cookie就可以了。
更新COOKIE的值
document.cookie = "username=Jane Smith; max-age=" + 60*60*24*7;
这段代码将更新username的值为Jane Smith，同时重新设置了其生存周期。
四、删除COOKIE
删除一个Cookie其实是将其过期时间设置为过去的某一时间点，通常我们会使用Unix时间起点，也就是1970年1月1日。
删除特定COOKIE
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
设置expires属性为一个过去的日期，使得该Cookie被删除。
通过上述的操作，我们可以控制网页中的Cookie，从而存储、传递和控制用户态等关键信息。考虑到现代的浏览器安全原则和隐私保护，我们在操作Cookie时还需要注意SameSite属性和Secure标志的使用以确保安全性。同时，为了兼容不同的浏览器，我们可能还需要对Cookie操作进行附加的判断和处理，确保功能的正常使用。
相关问答FAQs：
如何使用 JavaScript 设置一个 Cookie？
通过使用 JavaScript，你可以通过以下步骤设置一个 Cookie：
- 首先，使用
document.cookie属性来访问和修改当前页面的 Cookie 值。 - 创建一个字符串，表示要设置的 Cookie 的名称和值。例如，
var cookieString = "name=value"; - 添加可选的选项，如过期时间、路径和域。例如，
var expires = "; expires=Sun, 31 Dec 2023 23:59:59 GMT";，这将设置 Cookie 的过期时间为 2023 年 12 月 31 日。 - 使用
document.cookie属性将 Cookie 字符串分配给 Cookie。
例如，document.cookie = cookieString + expires + "; path=/";
如何使用 JavaScript 读取 Cookie 的值？
要读取 Cookie 的值，可以通过以下步骤使用 JavaScript：
- 使用
document.cookie属性来访问当前页面的 Cookie 值。 - 将
document.cookie的值分割成一个数组，每个元素表示一个 Cookie 的键值对。 - 遍历该数组，并找到所需的 Cookie 的值。你可以使用字符串的
split()方法将 Cookie 字符串分割成一个数组，然后使用循环或其他方式查找特定 Cookie 的值。
以下是一个读取 Cookie 值的示例代码：
function getCookie(cookieName) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === cookieName) {
return decodeURIComponent(cookie[1]);
}
}
return null;
}
var cookieValue = getCookie("name");
console.log(cookieValue);
如何使用 JavaScript 删除一个 Cookie？
要删除一个 Cookie，你可以使用以下步骤：
- 首先，使用
document.cookie属性访问和修改当前页面的 Cookie 值。 - 获取要删除的 Cookie 的名称。
- 将 Cookie 的过期时间设置为之前的日期。
以下是一个删除 Cookie 的示例代码：
function deleteCookie(cookieName) {
document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
deleteCookie("name");
通过将 Cookie 的过期时间设置为过去的日期，浏览器将自动将该 Cookie 从浏览器中删除。
