JavaScript cookie的设置获取删除详解

我可以为您详细讲解“JavaScript cookie的设置、获取、删除详解”的攻略。

我可以为您详细讲解“JavaScript cookie的设置、获取、删除详解”的攻略。

什么是Cookie

在介绍Cookie设置、获取和删除之前，我们先来了解一下什么是Cookie。

Cookie，也称为Web Cookie或浏览器Cookie，指网站为了辨别用户身份，存储在用户本地终端（通常是浏览器）上的数据（通常经过加密）。

Cookie的组成

一个典型的Cookie由一个名称、一个值和可选的属性构成，如下所示：

cookieName = cookieValue; property1=value1; property2=value2; ...

其中名称和值被视为必需属性。

Cookie的属性

Cookie的属性包括：

• Expires: 用于规定Cookie的失效时间。
• Domain: 用于限制Cookie的域，只有在该域及其子域名有效。
• Path: 规定Cookie的有效路径。
• Secure: 用于规定是否只能通过HTTPS协议来传递Cookie。
• HttpOnly: 用于规定Cookie是否只能通过HTTP/HTTPS协议来访问，防范XSS攻击。

如何设置Cookie

可以通过JavaScript来设置Cookie。以下是一个设置Cookie的示例：

document.cookie = "username=abc; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/;";

在代码中，我们将一个名为“username”的Cookie设置为“abc”，并指定过期时间为2025年12月18日，并指定其有效路径为“/”。

可以看到，在设置Cookie时，可以设置一个或多个属性，具体用法可以参考上面提到的属性列表。

如何获取Cookie

除了通过document.cookie属性来获取所有Cookie之外，我们还可以通过以下代码来获取指定名称的Cookie：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

在代码中，我们定义了一个名为getCookie的函数，该函数接收一个字符串参数“cname”，表示需要获取的Cookie的名称。函数内部先用decodeURIComponent对document.cookie进行解码，再根据传入的cname来查找相应的Cookie，最后返回对应的Cookie值。

以下是一个获取Cookie的示例：

var name = getCookie("username");

在上面的示例中，我们使用getCookie函数获取名为“username”的Cookie，并将其值保存在名为“name”的变量中。

如何删除Cookie

在JavaScript中，我们可以通过设置过期时间为过去的方式来删除Cookie。以下是一个删除Cookie的示例：

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

在代码中，我们将指定名称的Cookie的过期时间设置为过去的时间，从而达到删除它的效果。

以上就是“JavaScript cookie的设置、获取、删除详解”的完整攻略，希望对您有所帮助。