如何使用 JavaScript 清除所有 Cookie？

在本教程中，我们将学习如何使用 JavaScript 清除所有 Cookie。Cookie 是以文本文件格式存储在浏览器或用户计算机中的文本或数据，它是一种缓存内存。

开发人员可以在浏览器的 Cookie 中存储用户名、身份验证令牌等。当用户第一次访问网页时，它会从服务器检索用户信息并以 Cookie 格式存储在浏览器中。之后，当用户再次访问网页时，它会从 Cookie 中检索所需数据，而不是从服务器检索，从而使应用程序更快、更安全。

每个浏览器对存储 Cookie 的大小都有限制。大多数现代浏览器允许用户存储最大大小为 4kb 的 Cookie。但是，不同的浏览器允许存储不同数量的 Cookie。例如，Google Chrome 允许 180 个，Firefox 允许 150 个，等等。

使用 JavaScript 清除所有 Cookie

本节将介绍如何使用 JavaScript 清除所有 Cookie。每个 Cookie 都包含一个过期属性，其中包含特定 Cookie 的过期日期和时间。我们可以检索所有 Cookie 并将过期日期设置为过去以清除所有 Cookie。

语法

用户可以按照以下语法将所有 Cookie 的过期日期设置为过去。

// retrieve all cookies
var Cookies = document.cookie.split(';');
 // set past expiry to all cookies
for (var i = 0; i < Cookies.length; i++) {
   document.cookie = Cookies[i] + "=; expires="+ new Date(0).toUTCString();
}

算法

用户可以按照以下算法清除所有 Cookie。

  • 步骤 1 − 使用 document.cookies 获取所有 Cookie。

  • 步骤 2 − 使用分隔符“;”分割所有 Cookie，并返回 Cookie 数组。

  • 步骤 3 − 遍历每个 Cookie 并将“expires”属性的值设置为过去的过期日期。

示例

在下面的示例中，我们创建了两个按钮，名为“显示 Cookie”和“清除 Cookie”。当用户点击其中任何一个时，它将调用相应的函数来显示 Cookie 或删除 Cookie。当网页加载时，我们将在 Cookie 中设置对象。

<html>
<head>
</head>
<body>
   <h2>Clear all cookies using JavaScript</h2>
   <h4>Click on the below buttons to show and clear cookies.</h4>
   <button onclick = "showCookies()">show Cookies</button>
   <button onclick = "deleteCookies()">clear Cookies</button>
   <div id = "show"></div>
   <script type ="text/javascript">
      
      // function to show cookies
      function showCookies() {
         var show = document.getElementById("show");
         show.innerHTML = document.cookie;
      }

      // function to delete cookies
      function deleteCookies() {
         var Cookies = document.cookie.split(';');
 
         // set 1 Jan, 1970 expiry for every cookies
         for (var i = 0; i < Cookies.length; i++)
         document.cookie = Cookies[i] + "=;expires=" + new Date(0).toUTCString();
         showCookies();
      }
 
      // set object in the cookies on webpage load.
      window.onload = () => {
         let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", }
         document.cookie = 'object=' + JSON.stringify(object);
      }
   </script>
</body>
</html>

在以上输出中，当用户点击“显示 Cookie”按钮时，可以在 Cookie 中看到最后的对象。当用户点击“清除 Cookie”按钮时，它将从 Cookie 中删除对象。在这里，我们清除了我们设置的所有 Cookie。

用户已经成功学习了如何清除所有 Cookie。但是，用户可以直接转到开发人员工具并清除 Cookie。用户可以按照以上示例代码使用 JavaScript 从客户端清除 Cookie。

更新于： 2022年8月23日

20K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.