Javascript 简明教程
JavaScript - Deleting Cookies
十、为了使用JavaScript删除cookie，我们可以将到期日期设定为过去日期。我们还可以使用max-age属性删除cookie。我们可以从浏览器中明确删除cookie。
十一、使用JavaScript删除cookie会删除网站存储在用户计算机上的少量数据。Cookie用于跟踪用户的浏览活动和偏好。
十二、需要注意的是，删除cookie可能会产生意想不到的后果。例如，如果您删除用于验证您身份的cookie，您将从网站注销。您应该只有在确定要删除cookie时才删除它们。
Different Ways to Delete the Cookies
十三、有三种不同的方法可以删除cookie：
-
将过去到期日期设定为expires属性。
-
Use the 'max-age' attribute.
-
从浏览器中明确删除cookie。
Delete Cookies using 'expires' Attribute
当您将过去到期日期设为expires属性的值时，浏览器会自动删除cookie。
Syntax
按照以下语法通过设置过去到期日期为expires属性的值来删除cookie。
document.cookie = "data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";在上述语法中，我们已将过去日期设为expires属性的值。您可以设置任何过去日期。
Example
在下面的代码中，您可以点击设置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>Delete Cookies using 'max-age' Attribute
当您将 0 或负值分配给“maxAge”属性时，浏览器会自动删除 cookie。
Syntax
按照以下语法使用 max-age 属性来删除 cookie。
document.cookie = "user1=sam;max-age=-60;";在上述语法中，我们将“max-age”属性设置为负值以删除 cookie。
Example
在以下代码中，我们仅在 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>
