迹忆客 专注技术分享

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

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

不同类型的 JavaScript cookies

Cookie 分为三种类型：

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

使用 JavaScript 创建一个 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 中。