在 JavaScript 中删除 Cookie

2025年4月23日 | 阅读 3 分钟

在上一节中，我们学习了在 JavaScript 中设置和更新 Cookie 的不同方法。除此之外，JavaScript 还允许我们删除 Cookie。在这里，我们将看到所有可能的删除 Cookie 的方法。

删除 Cookie 的不同方法

以下是删除 Cookie 的方法

可以通过使用 expires 属性删除 Cookie。
也可以通过使用 max-age 属性删除 Cookie。
我们可以通过使用网络浏览器显式删除 Cookie。

删除 Cookie 的示例

示例 1

在此示例中，我们使用 expires 属性，通过为其提供过期日期（即任何过去的日期）来删除 Cookie。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie() 
{
    document.cookie="name=Martin Roy; expires=Sun, 20 Aug 2000 12:00:00 UTC";
  
} 
function getCookie()
{
    if(document.cookie.length!=0)
    {
    alert(document.cookie);
    }
    else
    {
        alert("Cookie not avaliable");
    }
}
</script>
</body>
</html>

示例 2

在此示例中，我们使用 **max-age** 属性，通过为其提供零或负数（表示秒）来删除 Cookie。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie() 
{
    document.cookie="name=Martin Roy;max-age=0";
} 
function getCookie()
{
    if(document.cookie.length!=0)
    {
    alert(document.cookie);
    }
    else
    {
        alert("Cookie not avaliable");
    }
}

</script>
</body>
</html>

示例 3

让我们看一个设置、获取和删除多个 Cookie 的示例。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
<input type="button" value="Set Cookie1" onclick="setCookie1()">
<input type="button" value="Get Cookie1" onclick="getCookie1()">
<input type="button" value="Delete Cookie1" onclick="deleteCookie1()">
<br>
<input type="button" value="Set Cookie2" onclick="setCookie2()">
<input type="button" value="Get Cookie2" onclick="getCookie2()">
<input type="button" value="Delete Cookie2" onclick="deleteCookie2()">
<br>
<input type="button" value="Display all cookies" onclick="displayCookie()">

<script>
function setCookie1() 
{
    document.cookie="name=Martin Roy";
     cookie1=  document.cookie;
} 
function setCookie2() 
{
    document.cookie="name=Duke William";
     cookie2=  document.cookie;
} 

function getCookie1()
{
    if(cookie1.length!=0)
    {
    alert(cookie1);
    }
    else
    {
        alert("Cookie not available");
    }
}

function getCookie2()
{
    if(cookie2.length!=0)
    {
    alert(cookie2);
    }
    else
    {
        alert("Cookie not available");
    }
}

function deleteCookie1()
{
    document.cookie=cookie1+";max-age=0";
    cookie1=document.cookie;
    alert("Cookie1 is deleted");
}

function deleteCookie2()
{
    document.cookie=cookie2+";max-age=0";
    cookie2=document.cookie;
   alert("Cookie2 is deleted");
}

function displayCookie()
{
if(cookie1!=0&&cookie2!=0)
{
    alert(cookie1+" "+cookie2);
}
else if(cookie1!=0)
{
    alert(cookie1);
}
else if(cookie2!=0)
{
    alert(cookie2);
}
else{
    alert("Cookie not available");
}

}

</script>
</body>
</html>

示例 4

让我们看一个显式删除 Cookie 的示例。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie() 
{
    document.cookie="name=Martin Roy";
  
} 
function getCookie()
{
    if(document.cookie.length!=0)
    {
    alert(document.cookie);
    }
    else
    {
        alert("Cookie not avaliable");
    }
}
</script>
</body>
</html>

点击一次 **Set Cookie** 后，每当我们点击 **Get Cookie**，Cookie 的键和值都会显示在屏幕上。

要显式删除 Cookie，请按照以下步骤操作

打开 Mozilla Firefox。
点击 **打开菜单 - 库 - 历史 - 清除最近历史 - 详细信息**。

在这里我们可以看到一个 **Cookie** 复选框，它已被标记。现在，点击 **立即清除** 以显式删除 Cookie。

现在，点击 **Get Cookie**，将出现以下对话框。

在这里，我们可以看到 Cookie 已被删除。

下一主题JavaScript 中的异常处理

在 JavaScript 中删除 Cookie

删除 Cookie 的不同方法

删除 Cookie 的示例

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

在 JavaScript 中删除 Cookie

删除 Cookie 的不同方法

删除 Cookie 的示例

示例 1

示例 2

示例 3

示例 4

相关帖子

JavaScript Cookies

带多个名称的 Cookie

Cookie 属性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器