在 JavaScript 中读取和创建 Cookie

即使您以前没有使用过 cookie，您也可能已经熟悉它们。您访问的几乎每个网站都要求接受 cookie。

什么是 cookie？

Cookie 基本上是一小段文本，其中包含一些与您或您正在访问的网站相关的信息。此信息存储在您的浏览器中，并允许网站为您提供个性化体验、授予对网站受保护部分的访问权限或收集分析数据。

在 JavaScript 中读取和创建 Cookie 第1张

在本教程中，我将向您展示如何使用 javascript 管理 cookie。

该Document接口包含一个名为的属性cookie，您可以使用它来读取和写入 cookie。只需使用即可document.cookie返回一个字符串，其中包含用分号分隔的所有 cookie。以下示例显示了在我的浏览器上为维基百科主页设置的所有 cookie 。

let all_cookies = document.cookie;
console.log(all_cookies);
/* Outputs: 
GeoIP=IN:State_Code:State:My_Latitude:My_Longitude:v4; enwikiwmE-sessionTickLastTickTime=1675054195383; enwikiwmE-sessionTickTickCount=1; enwikimwuser-sessionId=7ed98fe7399e516cff54 
*/

我关闭了页面，稍后又重新打开了它。在几次刷新和等待一段时间后，存储在 cookie 中的值已更改为以下内容：

let all_cookies = document.cookie;
console.log(all_cookies);
/* Outputs: 
GeoIP=IN:State_Code:State:My_Latitude:My_Longitude:v4; enwikimwuser-sessionId=7ed98fe7399e516cff54; enwikiwmE-sessionTickLastTickTime=1675058494564; enwikiwmE-sessionTickTickCount=16 
*/

如您所见，cookie 中的值会随时间变化。网站可以使用它们来跟踪诸如我在页面上停留了多长时间之类的事情。

返回的值document.cookie表明我们只取回了浏览器中保存的cookies的名称和值。让我们编写一个 javaScript 函数，一旦我们传递了它的名称，它将为我们提供存储的 cookie 的值。

function read_cookie(name) {
  let all_cookies = document.cookie.split("; ");
  let cookie_name = name + "=";
  for (let i = 0; i < all_cookies.length; i++) {
    let clean_cookie = all_cookies[i];
    if (clean_cookie.startsWith(cookie_name)) {
      return clean_cookie.substring(cookie_name.length, clean_cookie.length);
    }
  }
}

目前我可以使用 JavaScript 访问维基百科上的四个 cookie。我使用我们的read_cookie()函数从它们中获取值。GeoIP cookie 的值显示位置是纽约，因为它被我的 vpn 屏蔽了。您可以尝试使用维基百科或任何其他网站上的上述功能来检索 cookie 值：

let geo_ip = read_cookie("GeoIP");
// Outputs: US:NY:New_York:40.74:-73.99:v4 
let session_id = read_cookie("enwikimwuser-sessionId");
// Outputs: 398c37df147f0b377825

在 JavaScript 中创建 Cookie

cookie您还可以通过使用该属性并将其值设置为格式为的字符串来创建新的 cookie key=value。这里key是 cookie 的名称，value是您为 cookie 设置的值。这些是创建 cookie 所需的唯一值，但您也可以传递其他重要信息。

要查看设置 cookie 值的工作原理，您可以访问https://www.weixiaolive.com/然后打开浏览器控制台执行以下代码：

document.cookie = "site_theme=christmas";

设置过期时间

除非另有说明，否则您设置的 cookie 会在用户关闭浏览器时在浏览会话结束时过期。如果您希望您的 cookie 在未来的特定时间过期，您应该expires通过将以下字符串添加到您的 cookie 来设置一个日期。

;expires:GMT-string-fromat-date

我们site_theme上面的 cookie 设置为在您关闭浏览器后立即过期。您可以通过关闭浏览器然后尝试使用read_cookie()我们上面编写的函数读取 cookie 来验证这一点。我们可以使用以下代码片段来延长它的寿命：

 document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT";
 // The cookie will now expire on Thu, 28 Dec 2023 08:58:01 GMT

该 cookie 现在将于 2023 年 12 月 28 日到期。请尝试关闭浏览器窗口并再次重新打开页面，以查看该 cookie 是否仍然可供您阅读。

设置 cookie 过期时间的另一种方法是使用以下字符串：

; max - age = cookie - age - in - seconds

假设您希望 cookie 在设置后一周过期。你可以通过计算60*60*24*7来确定秒数。以下行将为您设置 cookie：

document.cookie = `site_theme=christmas;max-age=${60*60*24*7}`;
// The cookie will now expire one week from now

您可以设置expires当您希望 cookie 在特定时间过期时的max-age值，以及当您希望 cookie 在特定时间段后过期时的值。

设置域和路径

重要的是要记住，您不能为任何您想要的第三方域设置 cookie。例如，在weixiaolive.com上运行的脚本无法为wikipedia.org设置 cookie 。这是一项安全措施。

domain您可以通过设置 cookie 的和path值来更好地控制 cookie 的可访问性。您可以使用以下字符串设置这两个值：

;domain=domain;path=path

默认情况下，域设置为当前位置的主机。由于我们通过在https://www.weixiaolive.com打开浏览器控制台创建了我们早期的 cookie ，因此我们的 cookie 也只能在www.weixiaolive.com子域上访问。尝试使用https://www.weixiaolive.com/tutorialsread_cookie()的浏览器控制台上的功能，它将是.undefined

您可以通过执行以下行来创建一个可在www.weixiaolive.com的所有子域上访问的 cookie：

document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT;domain=www.weixiaolive.com";

同样，您也可以提供可访问 cookie 的路径。假设您希望site_theme cookie 仅在路径中包含/tutorials的 URL 上可用。您可以使用以下行执行此操作：

document.cookie = "site_theme=christmas;expires=Thu, 28 Dec 2023 08:58:01 GMT;domain=www.weixiaolive.com;path=/tutorials";

执行上述行后，由于路径限制，cookie 将无法通过 URL https://www.weixiaolive.com/categories/javascript访问。

在 JavaScript 中修改和删除 Cookie

当我们在本教程开头阅读维基百科的 cookie 信息时，您可能已经注意到 cookie enwikiwmE-sessionTickTickCount的值随着时间的推移而更新。出于多种原因，您可能希望定期更新 cookie 的值，例如计算访问次数或更新用户首选项。

了解创建 cookie 的基础知识后，您还可以轻松修改现有 cookie。继续上一节中的示例，假设您要将site_theme cookie 的值更改为new_year并将过期日期也更改为新年。您可以使用以下代码执行此操作：

document.cookie = "site_theme=new_year;expires=Mon, 1 Jan 2024 08:58:01 GMT;domain=www.weixiaolive.com;path=/tutorials";

您还记得我说过我们可以通过传递expires或max-age值来指定 cookie 何时过期吗？我们也可以使用它们来删除 cookie。

将的值设置max-age为 0 将使 cookie 在接下来的 0 秒内过期，或者换句话说现在过期。同样，你也可以将的值设置为expires过去的某个日期，它会清除cookie。

document.cookie = "site_theme=new_year;max-age=0;domain=weixiaolive.com;path=/tutorials";
document.cookie = "site_theme=new_year;expires=Mon, 1 Jan 2001 08:58:01 GMT;domain=weixiaolive.com;path=/tutorials";

如果您想删除 cookie，上面两行都可以使用。

当您修改或删除 cookie 时要记住的一件重要事情是domain和path值必须与您正在修改或删除的 cookie 相匹配。

最后的想法

在本教程中，我们学习了如何在 JavaScript 中管理 cookie。您现在应该能够从 cookie 中读取数据、创建新 cookie 以及修改或删除现有 cookie。虽然 cookie 非常适合存储信息，但仍有一些事项需要牢记。首先，cookie 存储限制在 4 kB 左右，因此您不应该使用它们来存储大量信息。其次，您也不能为同一域创建大量 cookie。该限制因浏览器而异，并且至少在 300 左右相当慷慨。这通常应该足够了。

文章目录

什么是 cookie？

在 JavaScript 中读取 Cookie 信息