html5怎么使用cookie？如何用document.cookie读写cookie存储简单数据

在html5的前端开发中，cookie是一种常用的轻量级数据存储方式，适合存储少量简单的文本数据，通过浏览器提供的document.cookie属性就能完成cookie的读写操作，不需要依赖额外的库。

什么是cookie

cookie是浏览器保存在用户本地终端上的小型数据片段，一般由服务器设置，也可以通过前端JavaScript直接操作。每个cookie由名称、值、过期时间、作用域等属性组成，浏览器会在后续请求中携带对应作用域下的cookie发送给服务器。

使用document.cookie写入cookie

写入cookie时，只需要给document.cookie赋值一个符合格式的字符串即可，字符串格式为名称=值; expires=过期时间; path=作用路径，多个属性用分号分隔。

// 写入一个简单的cookie，名称为username，值为zhangsan
document.cookie = "username=zhangsan";

// 写入带过期时间的cookie，过期时间为7天后
let expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 7);
document.cookie = "user_id=1001; expires=" + expireDate.toUTCString() + "; path=/";

// 写入带作用路径的cookie，仅在/test路径下生效
document.cookie = "theme=dark; path=/test";

需要注意的是，直接赋值document.cookie不会覆盖已有的cookie，只会新增或者更新同名称的cookie。如果名称相同，后面的赋值会更新该cookie的值和属性。

使用document.cookie读取cookie

读取cookie时，直接访问document.cookie会返回当前页面所有可用的cookie字符串，格式为名称1=值1; 名称2=值2; 名称3=值3，多个cookie之间用分号和空格分隔。

// 获取所有cookie
let allCookies = document.cookie;
console.log(allCookies); // 输出类似 "username=zhangsan; user_id=1001"

// 封装一个函数，根据cookie名称获取对应的值
function getCookie(name) {
    let cookieArr = document.cookie.split("; ");
    for (let i = 0; i < cookieArr.length; i++) {
        let itemArr = cookieArr[i].split("=");
        if (itemArr[0] === name) {
            return itemArr[1];
        }
    }
    return null;
}

// 调用函数获取username的值
let username = getCookie("username");
console.log(username); // 输出 zhangsan

删除cookie

cookie本身没有直接的删除方法，只需要将对应cookie的过期时间设置为过去的时间，浏览器就会自动删除该cookie。

// 删除名称为username的cookie
let expireDate = new Date();
expireDate.setTime(expireDate.getTime() - 1);
document.cookie = "username=; expires=" + expireDate.toUTCString() + "; path=/";

注意事项

• cookie有大小限制，单个cookie的大小一般不超过4KB，每个域名下可存储的cookie数量也有限制，适合存储少量简单数据。
• 如果cookie的值包含特殊字符，比如分号、等号、空格等，需要使用encodeURIComponent进行编码，读取时使用decodeURIComponent解码。
• 出于安全考虑，敏感数据不建议存储在cookie中，避免被恶意获取。
• 如果页面使用了HTTPS协议，可以设置cookie的secure属性，让cookie仅在HTTPS请求中传输。

// 存储带特殊字符的值，进行编码处理
let specialValue = "test;value=123";
document.cookie = "special_data=" + encodeURIComponent(specialValue) + "; path=/";

// 读取时解码
function getSpecialCookie(name) {
    let value = getCookie(name);
    if (value) {
        return decodeURIComponent(value);
    }
    return null;
}

HTML5cookiedocument_cookie数据存储修改时间：2026-06-15 14:36:15