JavaScript 中检查 Cookie 是否存在

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 不同类型的 JavaScript cookies
  2. 使用 JavaScript 创建一个 cookie
  3. 使用 JavaScript 读取或检查 cookies 是否存在
JavaScript 中检查 Cookie 是否存在

cookie 可能是一个简短的文档,它在大约 4KB 的 PC 上存储一些数据。使用 JavaScript,将创建、检索和更改 cookie,并且可以限制 cookie 的值、名称和长度。

本文讨论了 cookies 的概念以及如何使用 JavaScript 检查 cookie 是否存在。

不同类型的 JavaScript cookies

Cookie 分为三种类型:

  1. 会话 cookie 存储在你的浏览器中。一旦浏览器关闭,它们就会被删除。
  2. 第一方 cookie 由网站创建,仅供你的网站浏览。
  3. 第三方 cookie 由你网站上的第三方广告生成。

你可以使用 JavaScript 提供的 document.cookie 属性创建一个 name=value 形式的 cookie,该属性将允许你一次仅设置一个 cookie。使用此 document.cookie 属性,可以设置、读取和删除 cookies

语法:

document.cookie = "UserName = HelloWorld";

假设你想在创建 cookies 时使用特殊字符。在这种情况下,你需要使用名为 encodeURIComponent() 的 Javascript 提供的内置函数,该函数对分号、空格等特殊字符进行编码。

语法 - encodeURIComponent()

document.cookie = "UserName=" + encodeURIComponent("Hello  World!");

默认 cookie 生命周期仅限于当前浏览器会话的持续时间。一旦用户退出浏览器,它就会被删除。

使用 max-age 属性,你可以以秒为单位指定 cookie 在从系统中删除之前可以存储多长时间。

语法 - max-age:

document.cookie = "Username = HelloWorld; max-age =" + 15 * 24 * 60 * 60;

这个 cookie 的有效期为 15 天。

有关创建 cookie 的更多信息,请参见 document.cookie 的文档。

使用 JavaScript 读取或检查 cookies 是否存在

document.cookie 属性返回一个字符串,其中包含一个分号和一个以空格分隔的所有 cookies 列表。此字符串不包含任何 cookie 属性,例如过期、路径、域等。

要从此列表中获取单个 cookie,请使用 split() 方法将其拆分为单独的 name=value 对,然后搜索所需的名称,如下例所示:

function getCookie(user) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if(user == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  }else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}
checkCookie();

输出:

// If cookie is set
Welcome again, shraddha

在上面的代码中,我们创建了两个函数:

  1. getCookie() 函数读取 cookie 的值。
  2. checkCookie() 函数使用 getCookie() 检查用户名是否被设置。

如果已配置,将显示欢迎消息。如果不设置,可以提示用户名并存储在 cookies 中。

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn