js 按名称删除 cookie - Javascript (1)

📌 相关文章

📜 js 按名称删除 cookie - Javascript (1)

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

JS 按名称删除 Cookie - Javascript

当使用 JavaScript 在浏览器端处理 Cookie 时，有时我们需要删除一个指定名称的 Cookie。以下是一些常用的方法。

删除 Cookie

我们可以通过设置 Cookie 的 expires 属性将其过期时间设置为已过去时间。当浏览器准备删除已过期的 Cookie 时，它将从浏览器中删除该 Cookie。

以下是使用 JavaScript 删除 Cookie 的示例代码：

function deleteCookie(cookieName) {
  document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

此函数将删除名称为 cookieName 的 Cookie。

测试

为了测试该代码是否有效，让我们创建一个测试 HTML 页面。在该页面中，我们将创建一个名为 testCookie 的 Cookie，并尝试删除它。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test Delete Cookie</title>
</head>
<body>
  <script>
    function setCookie(name, value, days) {
      var expires = '';
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = '; expires=' + date.toGMTString();
      }
      document.cookie = name + '=' + value + expires + '; path=/';
    }

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

    function deleteCookie(cookieName) {
      document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }

    setCookie('testCookie', 'Hello, World!', 7);

    console.log(getCookie('testCookie'));
    deleteCookie('testCookie');
    console.log(getCookie('testCookie'));
  </script>
</body>
</html>

运行该 HTML 页面，将在浏览器控制台中看到两条输出，分别为 Cookie 的值和空值，证明已经成功删除了 Cookie。

总结

在本文中，我们介绍了使用 JavaScript 在浏览器中删除指定名称的 Cookie 的方法。我们使用了 expires 属性将 Cookie 的过期时间设置为已过去时间，以便浏览器知道将其删除。