答案：通过原生JS可操作Cookie实现客户端存储。使用getCookie读取指定名称的Cookie值，setCookie设置带过期时间的Cookie，deleteCookie通过设置过去时间删除Cookie，需注意路径、编码及Secure、SameSite等安全属性，适用于身份认证等需与服务器共享状态的场景。
在前端开发中，使用 JavaScript 操作 Cookie 是一种常见的客户端数据存储方式。虽然现在有 localStorage 和 sessionStorage 等更现代的替代方案，但在需要与服务器共享状态（如身份认证）时，Cookie 依然不可替代。下面介绍如何用原生 JS 读写 Cookie，并管理其生命周期。
读取 Cookie
JavaScript 中没有内置的专门方法来读取指定的 Cookie，但可以通过 document.cookie 获取所有 Cookie 字符串，然后自行解析。
document.cookie 返回的是一个字符串，包含当前页面可用的所有 Cookie，格式为 "key1=value1; key2=value2"。
示例：读取指定名称的 Cookie
以下函数可用于根据名称获取 Cookie 值：
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) {
return decodeURIComponent(value);
}
}
return null;
}
使用方式：const userId = getCookie('userId');
如果不存在该 Cookie，返回 null。
写入 Cookie
通过赋值 document.cookie 可以添加或更新 Cookie。注意：每次赋值只能设置一个 Cookie。
示例：设置带过期时间的 Cookie
以下函数可设置 Cookie 并指定有效期（单位：天）：
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=/`;
}
说明：
- encodeURIComponent 防止特殊字符出错。
- expires 设置过期时间，不设置则为会话 Cookie（关闭浏览器即失效）。
- path=/ 表示整个站点都可访问该 Cookie，也可设为特定路径如 path=/admin。
高级选项：设置安全属性
若网站使用 HTTPS，建议加上 Secure 和 SameSite 属性：
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;Secure;SameSite=Strict`;
Secure：仅通过 HTTPS 传输。
SameSite=Strict：防止跨站请求伪造（CSRF）。
删除 Cookie
JavaScript 无法直接“删除” Cookie，但可以通过设置过期时间为过去的时间来让浏览器自动清除。
function deleteCookie(name) {
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
}
注意：path 必须与设置时一致，否则可能无法正确删除。
Cookie 生命周期管理
Cookie 的生命周期由 Expires 或 Max-Age 决定：
- 不设置过期时间 → 会话 Cookie，浏览器关闭后失效。
- 设置 expires 或 max-age → 持久化 Cookie，到时间后自动清除。
- 可通过服务端响应头 Set-Cookie 更精确控制，如 HttpOnly、Secure 等。
常见场景建议：
- 用户登录状态：设置 7 天或 30 天过期，加 Secure 和 HttpOnly（由后端设置）。
- 临时标记（如弹窗已展示）：使用会话 Cookie 即可。
基本上就这些。JS 操作 Cookie 不复杂，但要注意编码、路径和安全属性，避免遗漏关键细节。
