JavaScript如何操作Cookie_JavaScript读写删除Cookie方法与安全设置_技术教程

JavaScript通过document.cookie读写Cookie，需按格式设置键值对及属性；常用属性包括expires、max-age、path、domain、Secure、HttpOnly和SameSite；读取时返回所有Cookie字符串，需解析获取指定值；删除需将expires设为过去时间；建议封装读取、写入、删除函数以提升易用性；生产环境应使用Secure、HttpOnly和SameSite增强安全性；敏感信息应避免明文存储；现代项目推荐localStorage或JWT替代Cookie管理。

JavaScript 可以通过内置的 document.cookie API 来读取、写入和删除 Cookie。虽然这个 API 功能有限且使用起来不够直观，但结合一些封装方法可以高效地管理 Cookie，并通过设置安全属性提升应用安全性。

写入 Cookie 的基本方法

通过给 document.cookie 赋值字符串来添加或更新 Cookie。格式为 key=value，多个属性用分号分隔。

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/; Secure; HttpOnly";

常用参数说明：

expires：设置过期时间，GMT 格式。不设置则为会话 Cookie，浏览器关闭即失效
max-age：以秒为单位设置有效期（现代浏览器推荐使用）
path：指定可访问 Cookie 的路径，默认为当前路径
domain：指定可访问的域名，如 .example.com 可用于子域名共享
Secure：仅在 HTTPS 连接下发送 Cookie
HttpOnly：防止 JavaScript 访问，降低 XSS 攻击风险
SameSite：可设为 Strict、Lax 或 None，用于防范 CSRF 攻击

示例：设置一个保留 7 天的用户偏好 Cookie

const date = new Date();
date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = `theme=dark; expires=${date.toUTCString()}; path=/`;

读取 Cookie 的方法

document.cookie 在读取时返回所有可用 Cookie 的字符串，格式为 key1=value1; key2=value2，需自行解析。

封装一个根据名称获取 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;
}

调用方式：getCookie('username') 返回对应值或 null。