JavaScript - 删除 Cookies
要使用 JavaScript 删除 cookies，可以将 expires 日期设置为过去的日期。也可以使用 max-age 属性来删除 cookie。我们可以从浏览器中显式删除 cookies。
使用 JavaScript 删除 cookies 会移除网站存储在用户计算机上的少量数据。Cookies 用于跟踪用户的浏览活动和偏好。
需要注意的是，删除 cookies 可能会产生意外后果。例如，如果删除用于向网站进行身份验证的 cookie，您将从该网站注销。只有在确定要删除时才应删除 cookies。
删除 Cookies 的不同方式
有三种不同的方式来删除 cookies −
将过去的到期日期设置到 'expires' 属性。
使用 'max-age' 属性。
从浏览器中显式删除 cookies。
使用 'expires' 属性删除 Cookies
当您将过去的到期日期设置为 'expires' 属性的值时，浏览器会自动删除该 cookie。
语法
按照以下语法，通过将过去的到期日期设置为 'expires' 属性的值来删除 cookie。
document.cookie = "data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";
在上述语法中，我们将过去的日期设置为 'expires' 属性的值。您可以设置任何过去的日期。
示例
在下面的代码中，您可以点击 set cookies 按钮来设置 cookies。然后，点击 get cookies 按钮来观察 cookies。
接下来，点击 delete cookies 按钮，然后再次获取 cookies 以检查 cookies 是否已被删除。
这里，我们仅删除 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' 属性删除 Cookies
当你将 0 或负值赋给 'maxAge' 属性时，浏览器会自动删除该 cookie。
语法
按照下面的语法使用 max-age 属性来删除 cookie。
document.cookie = "user1=sam;max-age=-60;";
在上面的语法中，我们为 'max-age' 属性设置了一个负值来删除 cookies。
示例
在下面的代码中，我们仅在 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>
从浏览器中显式删除 Cookies
你可以通过按照以下步骤手动从浏览器中删除 cookies。
步骤 1 − 在你的浏览器中，点击右上角的三个垂直点。然后，将鼠标悬停在 'history' 上，它会打开菜单。在菜单中，点击 'history'。
步骤 2 − 在这里，点击 'clear browsing data' 选项卡。
步骤 3 − 在这里勾选 cookies 和其他站点数据复选框。然后，点击 'clear data' 按钮。
不过，步骤可能会根据你使用的浏览器而有所不同。
通过这种方式，你可以使用三种方法中的任意一种来清除浏览器的 cookie。