Cookie

Cookie 曾一度用于客户端数据的存储，因当时并没有其他合适的存储办法而作为唯一的存储手段，但现在推荐使用现代存储 API。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器 API 已经允许开发者直接将数据存储到本地，如使用 Web storage API（localStorage 和 sessionStorage）或 IndexedDB 。

在 JavaScript 中，Cookie 可以通过 document.cookie 进行设置、获取和删除。以下是一些具体的例子，展示如何在 JavaScript 中操作 HTTP Cookie。

通过 document.cookie 设置一个 Cookie 的例子：

// 设置一个名为 "username" 的 Cookie，有效期为7天
function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 计算到期时间
    const expires = "expires=" + date.toUTCString();
    document.cookie = `${name}=${value}; ${expires}; path=/;`;
}

// 使用 setCookie 函数设置一个 Cookie
setCookie("username", "JohnDoe", 7);  // Cookie 将在7天后过期

这里的 document.cookie 会将 username 设置为 JohnDoe，并将 Cookie 的有效期设为 7 天。

获取 Cookie 的值时，我们可以从 document.cookie 中找到特定的 Cookie 值：

// 获取名为 "username" 的 Cookie 值
function getCookie(name) {
    const cookieArr = document.cookie.split(";"); // 分割所有的 Cookie
    for (let i = 0; i < cookieArr.length; i++) {
        let cookie = cookieArr[i].trim();
        if (cookie.indexOf(name + "=") === 0) {
            return cookie.substring(name.length + 1); // 返回 Cookie 值
        }
    }
    return null; // 如果未找到，则返回 null
}

// 使用 getCookie 函数获取 "username" 的值
const username = getCookie("username");
console.log(username);  // 如果存在，则打印 "JohnDoe"

这里，我们首先通过 document.cookie.split(";") 分割所有 Cookie，然后检查是否存在指定名称的 Cookie。

删除 Cookie 可以通过将 Cookie 的有效期设为过去的时间来实现：

// 删除名为 "username" 的 Cookie
function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

// 使用 deleteCookie 函数删除 "username" Cookie
deleteCookie("username");

设置 expires 为一个过去的日期，浏览器会删除该 Cookie。

一个简单的完整示例，用来设置、获取和删除 Cookie：

// 设置 Cookie
setCookie("username", "JohnDoe", 7);

// 获取 Cookie
console.log("Username Cookie:", getCookie("username"));

// 删除 Cookie
deleteCookie("username");
console.log("Username after deletion:", getCookie("username"));  // 输出 null

总结

设置 Cookie：通过 document.cookie 直接赋值并指定过期时间。
获取 Cookie：解析 document.cookie 中的字符串内容。
删除 Cookie：设置过期时间为过去的日期。

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

Cookie

1. 设置 Cookie

2. 获取 Cookie

3. 删除 Cookie

4. 综合示例：设置、获取和删除 Cookie

总结