JavaScript Cookies

在本教程中，您将学习如何在 JavaScript 中创建、读取、更新和删除 cookie。

什么是 Cookie

Cookie 是一个小型文本文件，可让您在用户计算机上存储少量数据（近 4KB）。 它们通常用于跟踪用户偏好等信息，当用户下次访问网站时，网站可以检索这些信息以个性化页面。

Cookie 是一种旧的客户端存储机制，最初是为 PHP、ASP 等服务器端脚本语言设计的。但是，也可以使用 JavaScript 直接创建、访问和修改 cookie，但是 过程有点复杂和混乱。

在 JavaScript 中创建 Cookie

在 JavaScript 中，您可以使用 document.cookie 属性创建、读取和删除 cookie。 此属性表示与文档关联的所有 cookie。

要创建或存储新的 cookie，请将 name=value 字符串分配给此属性，如下所示：

cookie 值不能包含分号、逗号或空格。 因此，您需要使用 JavaScript 的内置函数 encodeURIComponent() 对包含这些字符的值进行编码，然后再将其存储到 cookie 中。 同样，您需要在读取 cookie 值时使用相应的 decodeURIComponent() 函数。

默认情况下，cookie 的生命周期是当前浏览器会话，这意味着当用户退出浏览器时它会丢失。 要使 cookie 在当前浏览器会话之后持续存在，您需要使用 max-age 属性指定其生命周期（以秒为单位）。 此属性确定 cookie 在被删除之前可以在用户系统上保留多长时间，例如，后续 cookie 将存在 30 天。

您还可以使用 expires 属性指定 cookie 的生命周期。 此属性采用 cookie 应过期的确切日期（以 GMT/UTC 格式），而不是以秒为单位的偏移量。

这是一个使用可选 max-age 属性设置 cookie 的函数。 您还可以使用相同的函数通过为 daysToLive 参数传递值 0 来删除 cookie。

function setCookie(name, value, daysToLive) {
    // 编码值以转义分号、逗号和空格
    var cookie = name + "=" + encodeURIComponent(value);
    
    if(typeof daysToLive === "number") {
        /* 设置 max-age 属性以使 cookie 过期
         在指定的天数之后 */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        
        document.cookie = cookie;
    }
}

默认情况下，同一目录或该目录的任何子目录中的所有网页都可以使用 cookie。 但是，如果您指定 path，则 cookie 可用于指定路径中的所有网页以及该路径的所有子目录中的所有网页。 例如，如果路径设置为 /，则 cookie 在整个网站中都可用，无论哪个页面创建 cookie。

此外，如果您希望 cookie 在子域中可用，则可以使用 domain 属性。 默认情况下，cookie 仅可用于设置它们的域中的页面。

如果 blog.example.com 上的页面创建的 cookie 将其 path 属性设置为 / 并将其 domain 属性设置为 example.com，则该 cookie 也可用于 backend.example.com、portal.example.com 上的所有网页。 但是，您不能在域外共享 cookie。

还有一个名为 secure 的布尔属性。 如果指定了此属性，则 cookie 将仅通过安全（即加密）连接（例如 HTTPS）传输。

读取 Cookie

读取 cookie 稍微复杂一些，因为 document.cookie 属性只返回一个字符串，其中包含 一个分号和一个空格 分隔的所有 cookie 列表（即 name=value 对，例如 firstName=John; lastName=Doe;）。 此字符串不包含可能已为 cookie 设置的属性，例如 expires, path, domain 等。

为了从此列表中获取单个 cookie，您需要使用 split() 方法将其分解为单个 name=value 对，并搜索具体名称，如下图：

function getCookie(name) {
    // 拆分 cookie 字符串并在数组中获取所有单独的名称=值对
    var cookieArr = document.cookie.split(";");
    
    // 循环遍历数组元素
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        
        /* 删除 cookie 名称开头的空格
         并将其与给定的字符串进行比较 */
        if(name == cookiePair[0].trim()) {
            // 解码cookie值并返回
            return decodeURIComponent(cookiePair[1]);
        }
    }
    
    // 如果没有找到则返回 null
    return null;
}

现在我们将再创建一个函数 checkCookie() 来检查是否设置了 firstName cookie，利用上面的 getCookie() 函数， 如果已设置，则此函数将显示问候消息，如果未设置，则此函数将提示用户输入他们的名字并使用我们之前创建的 setCookie() 将其存储在 cookie 中 功能。

function checkCookie() {
    // 使用我们的自定义函数获取 cookie
    var firstName = getCookie("firstName");
    
    if(firstName != "") {
        alert("Welcome again, " + firstName);
    } else {
        firstName = prompt("Please enter your first name:");
        if(firstName != "" && firstName != null) {
            // 使用我们的自定义函数设置 cookie
            setCookie("firstName", firstName, 30);
        }
    }
}

更新 Cookie

更新或修改 cookie 的唯一方法是创建另一个与现有的具有相同 name 和 path 的 cookie。 创建一个名称相同但路径不同的 cookie 将添加一个额外的 cookie。 这是一个例子：

// 创建 cookie
document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60;

// 更新 cookie
document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;

删除 Cookie

要删除 cookie，只需使用相同的 name 再次设置它，指定一个空值或任意值，并将其 max-age 属性设置为 0。请记住，如果您 已经为 cookie 指定了 path 和 domain 属性，删除时还需要包含它们。

// Deleting a cookie
document.cookie = "firstName=; max-age=0";

// 删除 cookie 时指定路径和域
document.cookie = "firstName=; path=/; domain=example.com; max-age=0";

但是，要使用 expires 属性删除 cookie，只需将其值（即到期日期）设置为已过的日期，如下所示。