JavaScript - 刪除 Cookie

為了使用 JavaScript 刪除 Cookie，我們可以將過期日期設定為過去的一個日期。我們也可以使用 max-age 屬性刪除 Cookie。我們還可以從瀏覽器中顯式刪除 Cookie。

使用 JavaScript 刪除 Cookie 會移除網站儲存在使用者計算機上的少量資料。Cookie 用於跟蹤使用者的瀏覽活動和偏好。

需要注意的是，刪除 Cookie 可能產生意想不到的後果。例如，如果您刪除用於向網站驗證身份的 Cookie，您將被登出該網站。只有在您確定要這樣做時，才應刪除 Cookie。

刪除 Cookie 的不同方法

有三種不同的方法可以刪除 Cookie：

將過去的過期日期設定為 'expires' 屬性。
使用 'max-age' 屬性。
從瀏覽器中顯式刪除 Cookie。

使用 'expires' 屬性刪除 Cookie

當您將過去的過期日期設定為 'expires' 屬性的值時，瀏覽器會自動刪除 Cookie。

語法

請遵循以下語法，透過將過去的過期日期設定為 'expires' 屬性的值來刪除 Cookie。

document.cookie = "data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";

在上面的語法中，我們將過去日期設定為 'expires' 屬性的值。您可以設定任何過去的日期。

示例

在下面的程式碼中，您可以點選“設定 Cookie”按鈕來設定 Cookie。之後，點選“獲取 Cookie”按鈕來檢視 Cookie。

接下來，點選“刪除 Cookie”按鈕，然後再次獲取 Cookie 以檢查 Cookie 是否已刪除。

這裡，我們只刪除 data1 Cookie。

<html>
<body>  
<button onclick = "setCookies()"> Set Cookie </button>
<button onclick = "deleteCookies()"> Delete Cookie </button>
<button onclick="readCookies()"> Read Cookies </button>
<p id = "output"> </p>
<script>
	let output = document.getElementById("output");
	function setCookies() {
		document.cookie = "data1=test1;";
		document.cookie = "data2=test2;";
	}
	function deleteCookies() {
		document.cookie = "data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";
		document.cookie = "data2=test2;expires=Mon, 22 Aug 2050 12:00:00 UTC;";
	}
	function readCookies() {
		const allCookies = document.cookie.split("; ");
		output.innerHTML = "The cookie is : <br>";
		for (const cookie of allCookies) {
			const [key, value] = cookie.split("=");
			if (key == "data1" || key == "data2") {
				output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
			}
		}
	}
</script>
</body>
</html>

使用 'max-age' 屬性刪除 Cookie

當您將 0 或負值賦給 'maxAge' 屬性時，瀏覽器會自動刪除 Cookie。

語法

請遵循以下語法，使用 max-age 屬性刪除 Cookie。

document.cookie = "user1=sam;max-age=-60;";

在上面的語法中，我們為 'max-age' 屬性設定了一個負值來刪除 Cookie。

示例

在下面的程式碼中，我們在 deleteCookies() 函式中只刪除 user1 Cookie。

<html>
<body>    
<button onclick = "setCookies()"> Set Cookie </button>
<button onclick = "deleteCookies()"> Delete Cookie </button>
<button onclick = "readCookies()"> Read Cookies </button>
<p id = "output"> </p>
<script>
	let output = document.getElementById("output");
	function setCookies() {
		document.cookie = "user1=sam;";
		document.cookie = "user2=virat;";
	}
	function deleteCookies() {
		document.cookie = "user1=sam;max-age=-60;";
		document.cookie = "user2=virat;max-age=5000;";
	}
	function readCookies() {
		const allCookies = document.cookie.split("; ");
		output.innerHTML = "The cookie is : <br>";
		for (const cookie of allCookies) {
			const [key, value] = cookie.split("=");
			if (key == "user1" || key == "user2") {
				output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
			}
		}
	}
</script>
</body>
</html>

從瀏覽器中顯式刪除 Cookie

您可以按照以下步驟從瀏覽器手動刪除 Cookie。

步驟 1 - 在您的瀏覽器中，點選右上角的三個垂直點。然後，將滑鼠懸停在“歷史記錄”上，它將開啟選單。在選單中，點選“歷史記錄”。

步驟 2 - 在這裡，點選“清除瀏覽資料”選項卡。

步驟 3 - 在這裡選中 Cookie 和其他網站資料的複選框。然後，點選“清除資料”按鈕。

但是，步驟可能因您使用的瀏覽器而異。

這樣，您可以使用這三種方法中的任何一種來清除瀏覽器的 Cookie。

列印頁面