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

当您为"maxAge"属性赋值 0 或负值时，浏览器会自动删除 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。