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。

打印页面