Cookie有哪些属性和方法？一文解析Cookie属性与常用操作方法

Cookie是浏览器提供的客户端存储机制，常用于存储用户登录状态、偏好设置等少量数据，理解它的属性和操作方法是前端开发的基础能力。

Cookie的核心属性

每个Cookie都包含多个属性，这些属性决定了Cookie的有效期、作用范围和安全特性，常见的属性如下：

• Name：Cookie的名称，必须是唯一的，区分大小写。
• Value：Cookie存储的具体值，需要经过URL编码处理特殊字符。
• Expires/Max-Age：控制Cookie的过期时间，Expires是具体的过期日期，Max-Age是距离当前时间的秒数，默认是会话级Cookie，浏览器关闭后失效。
• Domain：指定Cookie可以生效的域名，默认是当前域名，设置后子域名也可以访问该Cookie。
• Path：指定Cookie生效的路径，默认是当前路径，只有匹配的路径下的请求才会携带该Cookie。
• Secure：标记为Secure的Cookie只会在HTTPS协议的请求中携带，避免明文传输。
• HttpOnly：设置后Cookie无法通过JavaScript的document.cookie访问，只能由服务器读取，可防止XSS攻击窃取Cookie。
• SameSite：控制跨站请求时是否携带Cookie，可选值有Strict、Lax、None，用于防范CSRF攻击。

原生JavaScript操作Cookie的方法

浏览器提供了document.cookie属性来读写Cookie，不过这个属性的操作方式比较特殊，需要手动拼接字符串。

设置Cookie

设置Cookie时，需要把属性和值拼接成固定格式的字符串赋值给document.cookie，多次赋值不会覆盖已有的Cookie，只会新增或更新同名的Cookie。

// 设置一个7天后过期的Cookie，作用域为当前域名的所有路径，仅HTTPS下传输
document.cookie = "username=zhangsan; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/; secure";

// 设置HttpOnly的Cookie无法通过前端代码设置，只能由服务器通过响应头Set-Cookie返回

读取Cookie

读取document.cookie会返回当前页面可访问的所有Cookie字符串，格式是key1=value1; key2=value2，需要手动解析。

// 解析所有Cookie为对象的方法
function getCookieObj() {
    const cookieStr = document.cookie;
    if (!cookieStr) return {};
    const cookieArr = cookieStr.split("; ");
    const cookieObj = {};
    cookieArr.forEach(item => {
        const [key, value] = item.split("=");
        cookieObj[decodeURIComponent(key)] = decodeURIComponent(value);
    });
    return cookieObj;
}

// 获取指定名称的Cookie
function getCookie(name) {
    const cookieObj = getCookieObj();
    return cookieObj[name] || null;
}

// 调用示例
console.log(getCookie("username")); // 输出zhangsan

删除Cookie

删除Cookie的本质是设置该Cookie的过期时间为过去的时间，浏览器会自动清除过期的Cookie。

// 删除指定名称的Cookie，需要和设置时的path、domain保持一致
function deleteCookie(name, path = "/", domain) {
    const cookieStr = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
    if (domain) {
        cookieStr += `; domain=${domain}`;
    }
    document.cookie = cookieStr;
}

// 调用示例
deleteCookie("username");

第三方库简化Cookie操作

原生操作Cookie需要手动处理编码、拼接字符串、解析等逻辑，开发效率较低，实际项目中可以使用成熟的第三方库，比如js-cookie，它封装了常用的操作方法，使用更便捷。

// 引入js-cookie后，设置Cookie
Cookies.set("username", "zhangsan", { expires: 7, path: "/", secure: true });

// 读取Cookie
const username = Cookies.get("username");

// 删除Cookie
Cookies.remove("username", { path: "/" });

注意事项

• Cookie有大小限制，单个Cookie不能超过4KB，单个域名下的Cookie数量也有限制，不适合存储大量数据。
• 设置Cookie时，名称和值如果包含特殊字符，需要使用encodeURIComponent编码，读取时用decodeURIComponent解码。
• HttpOnly属性的Cookie无法通过前端JavaScript访问，如果需要前端操作相关状态，不要设置该属性。
• SameSite属性设置为None时，必须同时设置Secure属性，否则浏览器会拒绝设置该Cookie。

CookieJavaScript前端存储document_cookie修改时间：2026-07-19 05:57:22