Javascript 简明教程

JavaScript - Deleting Cookies

十、为了使用JavaScript删除cookie，我们可以将到期日期设定为过去日期。我们还可以使用max-age属性删除cookie。我们可以从浏览器中明确删除cookie。

In order to delete cookies with JavaScript, we can set the expires date to a past date. We can also delete a cookie using the max-age attribute. We can delete the cookies explicitly from the browser.

十一、使用JavaScript删除cookie会删除网站存储在用户计算机上的少量数据。Cookie用于跟踪用户的浏览活动和偏好。

Deleting cookies with JavaScript removes small bits of data that websites store on a user’s computer. Cookies are used to track a user’s browsing activity and preferences.

十二、需要注意的是，删除cookie可能会产生意想不到的后果。例如，如果您删除用于验证您身份的cookie，您将从网站注销。您应该只有在确定要删除cookie时才删除它们。

It is important to note that deleting cookies can have unintended consequences. For example, if you delete a cookie that is used to authenticate you to a website, you will be logged out of the website. You should only delete cookies if you are sure that you want to do so.

Different Ways to Delete the Cookies

十三、有三种不同的方法可以删除cookie：

There are three different ways to delete the cookies −

Set the past expiry date to the 'expires' attribute.
Use the 'max-age' attribute.
Delete cookies explicitly from the browser.

Delete Cookies using 'expires' Attribute

当您将过去到期日期设为expires属性的值时，浏览器会自动删除cookie。

When you set the past expiry date as a value of the 'expires' attribute, the browser automatically deletes the cookie.

Syntax

按照以下语法通过设置过去到期日期为expires属性的值来删除cookie。

Follow the syntax below to delete a cookie by setting up the past expiry date as a value of the 'expires' attribute.

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

在上述语法中，我们已将过去日期设为expires属性的值。您可以设置任何过去日期。

In the above syntax, we have set the past date as a value of the 'expires' attribute. You may set any past date.

Example

在下面的代码中，您可以点击设置Cookie按钮来设置Cookie。然后，点击获取Cookie按钮来观察Cookie。

In the below code, you can click on the set cookies button to set cookies. After that, click on the get cookies button to observe the cookies.

接下来，点击删除 cookie 按钮，并再次获取 cookie 以检查 cookie 是否已删除。

Next, click the delete cookies button, and again get cookies to check whether the cookies are deleted.

在此，我们只删除 data1 cookie。

Here, we delete the data1 cookie only.

<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>

Delete Cookies using 'max-age' Attribute

当您将 0 或负值分配给“maxAge”属性时，浏览器会自动删除 cookie。

The browser automatically deletes the cookie when you assign 0 or a negative value to the 'maxAge' attribute.

Syntax

按照以下语法使用 max-age 属性来删除 cookie。

Follow the syntax below to use the max-age attribute to delete the cookie.

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

在上述语法中，我们将“max-age”属性设置为负值以删除 cookie。

In the above syntax, we have set a negative value to the 'max-age' attribute to delete the cookies.

Example

在以下代码中，我们仅在 deleteCookies() 函数中删除 user1 cookie。

In the below code, we delete the user1 cookie only in the deleteCookies() function.

<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>

Delete Cookies Explicitly from the Browser

您可以通过以下步骤从浏览器中手动删除 cookie。

You can manually delete the cookies from the browser by following the steps below.

Step 1 - 在您的浏览器中，点击右上角的三个竖点。之后，将鼠标悬停在“历史记录”上，它将打开菜单。在菜单中，点击“历史记录”。

Step 1 − In your browser, click on the three verticle dots at the top right corner. After that, hover over the 'history’, and it will open the menu. In the menu, click on the 'history’.

Step 2 - 在这里，点击“清除浏览数据”标签。

Step 2 − Here, click on the 'clear browsing data' tab.

Step 3 - 在此选中 cookie 和其他网站数据复选框。之后，点击“清除数据”按钮。

Step 3 − Check the cookies and other site data check boxes here. After that, click on the 'clear data' button.

但是，步骤可能会根据您使用的浏览器而有所不同。

However, the steps might differ based on what browser you are using.

这样，您可以在三种方法中使用任何一种来清除浏览器的 cookie。

This way, you can use any way among the three to clear your browser’s cookie.