JavaScript Cookie使用|极客笔记

JavaScript Cookie使用

介绍

在Web开发中，Cookie是一个很重要的概念，用于存储访问者的信息。通过Cookie，网站可以在用户的浏览器中存储和检索数据。本文将详细介绍JavaScript中如何使用Cookie来保存和获取数据。

什么是Cookie？

Cookie是存储在用户浏览器中的小型文本文件。它可以包含网站的相关信息，例如用户首选项、购物车内容、登录状态等。每当用户访问相同网站时，浏览器会将Cookie发送给服务器，以便服务器可以根据其中的信息进行相应的操作。

如何设置Cookie

要设置Cookie，我们需要使用JavaScript中的document.cookie属性。该属性是一个字符串，以键值对的形式存储Cookie的所有值。每对键值对之间使用分号和空格进行分隔。

以下是设置一个名为”username”的Cookie的示例代码：

document.cookie = "username=John Doe";

如果要设置多个Cookie，只需将它们以分号和空格进行分隔。例如：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
document.cookie = "age=25; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

在上面的示例中，我们设置了两个Cookie，一个是”username”，另一个是”age”。每个Cookie都包含一个”expires”属性，指定了Cookie的过期日期和时间。”path”属性定义了Cookie可用的路径。

如何获取Cookie的值

要获取Cookie的值，我们可以使用document.cookie属性。但是，该属性返回的是一个包含所有Cookie的字符串，我们需要使用一些函数来提取所需的值。

下面是一个获取名为”username”的Cookie值的示例代码：

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split("=");
    if (cookie[0] === name) {
      return cookie[1];
    }
  }
  return "";
}

const username = getCookie("username");
console.log(username); // 输出: John Doe

在上面的代码中，我们定义了一个getCookie函数，它接受一个参数name，用于指定要获取的Cookie的名称。该函数首先将document.cookie字符串分割成一个字符串数组，每个元素代表一个Cookie。然后，我们使用split函数将每个Cookie字符串分割成键值对。最后，使用for循环遍历所有的Cookie，如果找到与传入参数相匹配的Cookie名称，就返回对应的值。

如何删除Cookie

要删除Cookie，我们需要设置Cookie的过期日期为一个已经过去的时间。通过将过期日期设置为过去的时间，浏览器会根据这个过期时间自动删除Cookie。

下面是一个删除名为”username”的Cookie的示例代码：

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

deleteCookie("username");

在上面的代码中，我们定义了一个deleteCookie函数，它接受一个参数name，用于指定要删除的Cookie的名称。函数内部将使用document.cookie设置一个过去的过期日期来删除Cookie。

Cookie的其他属性

除了上面介绍的属性，Cookie还支持其他一些属性，用于设置Cookie的限制、安全性等。

以下是常用的一些Cookie属性：

domain：指定可访问Cookie的域名。
expires：指定Cookie的过期日期和时间。
max-age：指定Cookie的有效期（以秒为单位）。
path：指定Cookie的可用路径。
secure：指定Cookie是否仅在安全连接中可用（例如HTTPS）。

示例代码

设置Cookie

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
document.cookie = "age=25; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

获取Cookie的值

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split("=");
    if (cookie[0] === name) {
      return cookie[1];
    }
  }
  return "";
}

const username = getCookie("username");
console.log(username); // 输出: John Doe

删除Cookie

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

deleteCookie("username");

总结

Cookie在Web开发中是一个非常有用的机制，用于在用户浏览器中存储和检索数据。通过JavaScript的document.cookie属性，我们可以方便地设置、获取和删除Cookie的值。不过需要注意的是，由于Cookie是存储在客户端中的，因此在处理敏感信息时需要考虑安全性的问题。

JavaScript Cookie使用