JavaScript Cookie

Cookie 是浏览器保存在用户电脑上的一小段文本（键值对），用来在多次访问之间记住用户状态，例如"记住登录状态、购物车、浏览偏好"。当再次访问同一网站时，浏览器会自动把这些数据发送给服务器。JavaScript 通过 document.cookie 读写当前域名下的 Cookie。

Cookie 的存储方式

document.cookie 是一个整体字符串，一次只写一个"名=值"对，多个 Cookie 之间用分号加空格分隔：

// 写入一个会话级 Cookie（关闭浏览器即失效）
document.cookie = "username=张三";
// 再写一个，不会覆盖上一个
document.cookie = "theme=dark";
console.log(document.cookie); // 输出：username=张三; theme=dark

创建带过期时间的 Cookie

用 expires 指定有效期（或现代写法 max-age），path=/ 表示整站可用：

var date = new Date();
date.setDate(date.getDate() + 30); // 30 天后过期
document.cookie = "username=张三; expires=" + date.toUTCString() + "; path=/";
// max-age 写法：以秒为单位，30 天 = 30 * 24 * 60 * 60
document.cookie = "theme=dark; max-age=2592000; path=/";

读取 Cookie

document.cookie 返回的是整体字符串，需要自己按名称解析：

function getCookie(name) {
    var arr = document.cookie.split('; ');
    for (var i = 0; i < arr.length; i++) {
        var pair = arr[i].split('=');
        if (pair[0] === name) {
            return pair[1];
        }
    }
    return '';
}
console.log(getCookie('username')); // 输出：张三（前提是之前已写入）

修改与删除 Cookie

修改：用相同的名称与路径重新写入新值即可覆盖。删除：把过期时间设为过去的时间：

document.cookie = "username=李四; path=/"; // 同名覆盖，值改为李四
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // 删除
console.log(getCookie('username')); // 输出：（空字符串，已被删除）

限制与安全

单个 Cookie 一般不超过 4KB，一个域名下数量也有限；而且每次请求都会携带 Cookie，太多会拖慢网络。 出于安全考虑：重要数据不要明文存在 Cookie 里；敏感信息应由服务器配合 HttpOnly、Secure 属性管理；可被跨站读取的 Cookie 还有遭受 CSRF 攻击的风险。

小结：Cookie 通过 document.cookie 读写，形式是"名=值"，用 expires / max-age 控制有效期，path=/ 让整站生效。小体量的状态数据用它很方便；大数据与敏感信息请改用 localStorage，或完全交给服务器处理。