怎样用JavaScript操作Cookie？

Cookie是网站存储在用户浏览器中的小型文本数据，常用于保存用户登录状态、个性化设置等信息。在JavaScript中，我们可以通过操作document.cookie属性来读取、写入和删除Cookie，下面详细介绍具体的操作方法。

一、读取Cookie

读取Cookie非常简单，直接访问document.cookie即可，它会返回当前页面下所有可用的Cookie字符串，格式为key1=value1; key2=value2; ...。如果需要获取指定名称的Cookie值，我们可以编写一个解析函数来处理返回的字符串。

下面是读取指定名称Cookie的示例代码：

// 读取指定名称的Cookie值
function getCookie(name) {
    // 拼接要查找的Cookie名，后面加等号，避免匹配到其他同名前缀的Cookie
    const cookieName = name + "=";
    // 将获取到的所有Cookie字符串按分号分割为数组
    const cookieArr = document.cookie.split(";");
    // 遍历所有Cookie片段
    for (let i = 0; i < cookieArr.length; i++) {
        let cookie = cookieArr[i];
        // 去掉开头的空格
        while (cookie.charAt(0) === " ") {
            cookie = cookie.substring(1);
        }
        // 如果当前Cookie以目标名称开头，返回对应的值
        if (cookie.indexOf(cookieName) === 0) {
            return cookie.substring(cookieName.length, cookie.length);
        }
    }
    // 没有找到对应的Cookie，返回空字符串
    return "";
}

// 调用示例：获取名为username的Cookie
const username = getCookie("username");
console.log(username);

二、写入Cookie

写入Cookie同样是操作document.cookie属性，直接给它赋值即可，赋值格式为key=value，还可以附加可选的参数来设置Cookie的过期时间、作用路径、域名等属性，多个属性之间用分号分隔。

常用的Cookie属性说明：

• expires：设置Cookie的过期时间，格式为UTC时间字符串，如果不设置，Cookie会在浏览器关闭时自动删除（会话Cookie）。
• path：设置Cookie的作用路径，默认是当前页面所在路径，设置为/表示整个域名下都可以访问该Cookie。
• domain：设置Cookie所属的域名，默认是当前域名，设置后该域名及其子域名都可以访问该Cookie。
• secure：如果添加该属性，表示Cookie只会在HTTPS协议下传输，提高安全性。

下面是写入Cookie的示例代码：

// 写入Cookie的函数
function setCookie(name, value, days) {
    let expires = "";
    // 如果传入了过期天数，计算过期时间
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        // 转换为UTC时间字符串
        expires = "; expires=" + date.toUTCString();
    }
    // 拼接Cookie字符串，设置路径为整个域名可访问
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 调用示例：设置名为username的Cookie，值为张三，7天后过期
setCookie("username", "张三", 7);
// 设置名为isLogin的Cookie，值为true，会话级Cookie
setCookie("isLogin", "true");

三、删除Cookie

JavaScript没有直接删除Cookie的API，但是我们可以通过将Cookie的过期时间设置为过去的时间，让浏览器自动删除该Cookie。操作时只需要传入要删除的Cookie名称，将过期时间设为当前时间之前即可，同时要和写入时的path、domain属性保持一致，否则可能无法正确删除。

下面是删除Cookie的示例代码：

// 删除指定名称的Cookie
function deleteCookie(name) {
    // 将过期时间设置为1970年1月1日，浏览器会自动清除该Cookie
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 调用示例：删除名为username的Cookie
deleteCookie("username");

四、注意事项

在使用JavaScript操作Cookie时，需要注意以下几点：

• Cookie的大小通常限制在4KB左右，不适合存储大量数据。
• 浏览器对单个域名下的Cookie数量也有限制，不同浏览器限制不同，一般在20-50个之间。
• 如果Cookie中存储的值包含特殊字符（如分号、等号、空格等），建议在存储前使用encodeURIComponent()进行编码，读取时使用decodeURIComponent()解码，避免解析错误。
• 出于安全考虑，敏感信息（如用户密码、token等）不建议直接存储在Cookie中，如果必须存储，建议设置secure属性，并且配合HttpOnly属性（HttpOnly需要通过服务端设置，JavaScript无法操作）来避免XSS攻击获取Cookie内容。

如果需要存储大量数据，或者需要更灵活的客户端存储方案，可以考虑使用LocalStorage、SessionStorage等Web存储API，它们有更大的存储容量，操作也更简便。

JavaScript操作Cookiedocument.cookie前端存储Web开发浏览器数据存储