JavaScript Cookie

在 JavaScript 中，Cookie 是一种用于存储在客户端（即用户的浏览器）中的小型文本文件，通常包含一些关于用户和网站的信息。Cookie 的主要目的是在客户端和服务器之间存储状态信息，以便在多个页面或多个访问之间保持用户的状态和数据。

创建和操作 Cookie

JavaScript 可以通过 document.cookie 属性来读取和设置 Cookie。下面是一些常见的操作：

设置 Cookie

要设置一个 Cookie，可以将一个符合特定格式的字符串赋值给 document.cookie 属性：

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

name=value：设置 Cookie 的名称和值。

expires=date：Cookie 的过期时间，格式为 expires=GMTString。如果未指定过期时间，Cookie 将成为会话 Cookie，仅在浏览器会话期间有效。

path=path：指定 Cookie 的路径，默认为当前页面路径。

domain=domain：指定 Cookie 的域，默认为当前域。

secure：如果设置了该属性，则 Cookie 只能通过 HTTPS 连接发送。

例如，设置一个有效期为一天的 Cookie：

let now = new Date();
let expirationDate = new Date(now.getTime() + 24 * 60 * 60 * 1000); // 1 day later
document.cookie = "username=John; expires=" + expirationDate.toUTCString() + "; path=/";

读取 Cookie

要读取所有的 Cookie，可以访问 document.cookie 属性：

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

document.cookie 返回一个字符串，包含当前文档所有可用的 Cookie。

删除 Cookie

要删除一个 Cookie，可以通过设置其过期时间为过去的日期来实现：

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

这会立即使 Cookie 失效，浏览器会将其删除。

注意事项

安全性：敏感信息不应该存储在 Cookie 中，因为 Cookie 的内容可以被用户查看和修改。

大小限制：单个 Cookie 大小通常受到限制，通常为 4KB。

同源策略：Cookie 遵循同源策略，即一个网页只能访问属于自己域名、路径和端口的 Cookie。

// 设置一个 Cookie
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7); // Cookie 有效期为一周
document.cookie = "favoriteColor=blue; expires=" + expirationDate.toUTCString() + "; path=/";
// 读取所有 Cookie
let allCookies = document.cookie;
console.log("All Cookies:", allCookies);
// 删除一个 Cookie
document.cookie = "favoriteColor=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

以上是使用 JavaScript 操作 Cookie 的基本方法和示例。通过这些操作，可以在客户端存储和管理用户相关的状态信息，从而实现个性化和持久化的网站体验。