JavaScript中如何实现Cookie的读写？

Cookie是浏览器存储在用户本地终端上的数据片段，常用于保存用户登录状态、偏好设置等信息，JavaScript可以通过document_cookie属性直接操作Cookie，实现数据的读写和删除功能。

Cookie的基本结构

一个完整的Cookie由多个键值对和属性组成，基本格式为key=value; expires=过期时间; path=路径; domain=域名; secure，其中key=value是必须的部分，其余属性为可选配置。

JavaScript写入Cookie

写入Cookie只需要给document_cookie赋值对应的Cookie字符串即可，下面是一个通用的写入函数：

// 写入Cookie的函数，参数分别为键名、键值、过期天数、路径
function setCookie(key, value, expiresDays, path) {
    // 处理过期时间，默认不设置过期时间则为会话Cookie，关闭浏览器失效
    let expiresStr = '';
    if (expiresDays) {
        const date = new Date();
        date.setTime(date.getTime() + expiresDays * 24 * 60 * 60 * 1000);
        expiresStr = '; expires=' + date.toUTCString();
    }
    // 处理路径，默认路径为当前页面路径
    let pathStr = '';
    if (path) {
        pathStr = '; path=' + path;
    }
    // 拼接完整的Cookie字符串并赋值
    document.cookie = key + '=' + encodeURIComponent(value) + expiresStr + pathStr;
}

// 调用示例：设置名为username的Cookie，值为张三，7天后过期，路径为根目录
setCookie('username', '张三', 7, '/');

这里使用encodeURIComponent对值进行编码，避免值中包含特殊字符导致Cookie格式错误。

JavaScript读取Cookie

读取Cookie时，document_cookie会返回当前域名下所有可用的Cookie字符串，格式为key1=value1; key2=value2，需要解析这个字符串获取目标值：

// 读取指定键名的Cookie值
function getCookie(key) {
    // 拼接键名对应的前缀，避免匹配到包含该键名的其他键
    const keyPrefix = key + '=';
    // 分割所有Cookie
    const cookieArr = document.cookie.split(';');
    for (let i = 0; i < cookieArr.length; i++) {
        // 去除每个Cookie项前后的空格
        let cookieItem = cookieArr[i].trim();
        // 判断当前Cookie项是否以目标键名开头
        if (cookieItem.indexOf(keyPrefix) === 0) {
            // 返回解码后的值
            return decodeURIComponent(cookieItem.substring(keyPrefix.length, cookieItem.length));
        }
    }
    // 没有找到对应的Cookie则返回null
    return null;
}

// 调用示例：读取username的Cookie值
const username = getCookie('username');
console.log(username); // 输出：张三

JavaScript删除Cookie

Cookie本身没有删除的API，只需要将目标Cookie的过期时间设置为过去的时间，浏览器就会自动清除该Cookie：

// 删除指定键名的Cookie
function deleteCookie(key, path) {
    // 将过期时间设置为当前时间之前，即可删除Cookie
    document.cookie = key + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC' + (path ? '; path=' + path : '');
}

// 调用示例：删除username的Cookie，路径需要和设置时一致
deleteCookie('username', '/');

注意事项

• Cookie有大小限制，单个Cookie一般不超过4KB，每个域名下的Cookie数量也有上限，不适合存储大量数据。
• 如果Cookie设置了HttpOnly属性，JavaScript将无法读取和修改该Cookie，这是服务端设置的安全属性，用于防止XSS攻击。
• secure属性表示Cookie仅在HTTPS协议下才会被发送到服务端，本地HTTP环境无法设置该属性的Cookie。
• domain属性用于设置Cookie可用的域名，默认是当前域名，设置子域名可以让Cookie在子域名下共享。

JavaScriptCookie读写操作document_cookie修改时间：2026-07-01 18:09:24