如何使用 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+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告