📜  检查cookie是否存在js - Javascript(1)

📅  最后修改于: 2023-12-03 15:26:44.140000             🧑  作者: Mango

检查 Cookie 是否存在

当用户访问网站时,Web 浏览器会存储一些数据(如用户名、密码、购物车信息等)在本地计算机上。这些数据通常以 cookies 的形式存在。

在 JavaScript 中,我们可以通过 document.cookie 属性来访问已存储的 cookie。如果 cookie 存在,document.cookie 会返回该 cookie 的值。否则,它会返回一个空字符串。

下面是一些常见的情况,应用程序可能需要检查 cookie 是否存在:

  • 防止用户重复登录
  • 保存用户的偏好设置
  • 记录用户的活动
检查 Cookie 是否存在

我们可以使用 document.cookie 属性来检查 cookie 是否存在。以下是一个示例:

if (document.cookie.indexOf('cookie_name') >= 0) {
    // Cookie 存在
} else {
    // Cookie 不存在
}

上述代码中,我们使用 indexOf() 方法来查找 cookie 名称。如果 cookie 名称存在,则 indexOf() 方法返回 cookie 名称在字符串中的索引。否则,它会返回 -1。

提取 Cookie 值

在 JavaScript 中,我们可以通过 document.cookie 属性来访问已存储的 cookie。如果 cookie 存在,document.cookie 会返回该 cookie 的值。否则,它会返回一个空字符串。

以下是一个示例,演示如何提取 cookie 值:

function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) {
        return parts.pop().split(";").shift();
    }
}

上述代码中,我们定义了一个名为 getCookie() 的函数,该函数接受一个参数 name,表示要提取的 cookie 名称。函数通过将 document.cookie 赋值给 value 变量来获取所有 cookie。然后,我们使用 split() 方法将值拆分为一个数组。

接下来,我们使用 split() 方法将 cookie 名称和 cookie 值拆分为两个字符串。我们使用 shift() 方法从数组的开头提取 cookie 值。最后,我们返回 cookie 值。

创建新的 Cookie

如果 cookie 不存在,则可以使用以下代码创建新的 cookie:

document.cookie = "cookie_name=cookie_value;expires=cookie_expiration_date;path=cookie_path";

上述代码中:

  • cookie_name 表示要创建的 cookie 名称。
  • cookie_value 表示 cookie 的值。
  • cookie_expiration_date 表示 cookie 的过期时间,它应该是一个 GMT 日期格式的字符串。如果省略此参数,则 Cookie 将在浏览器会话结束时过期。
  • cookie_path 表示可以访问 cookie 的路径。如果省略此参数,则默认路径为当前页面的路径。
摧毁 Cookie

如果要删除 cookie,可以通过将 cookie 的过期时间设置为过去的日期,使其过期。以下是示例代码:

document.cookie = "cookie_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

上述代码中,我们将 cookie 的值设置为空字符串。我们将过期时间设置为一个过去的时间,以使 cookie 过期。最后,我们设置了 cookie 的路径。