Home » JavaScript » JavaScript Delete Cookie

JavaScript Delete Cookies

JavaScript Delete Cookie - Deleting a cookie is very simple. You don't have to specify a cookie value when you delete a cookie. JS Cookie can deleted by using expire attribute.

There are 3 ways to delete cookies:

By using expires attribute.
By using max-age attribute.
Directly, by using the web browser.

Delete Cookie in JavaScript

This example will give you an overview of using expires attribute to delete a cookie.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Delete Cookie </title>
<script>
var num = 1;
function addCookie(){
document.cookie = num+" = "+num;
num++;
}
function listCookies(){
var result = document.cookie;
document.getElementById("list").innerHTML = result;
}
function removeCookies() {
var res = document.cookie;
var multiple = res.split(";");
for(var i = 0; i < multiple.length; i++) {
var key = multiple[i].split("=");
document.cookie = key[0]+" =; expires = Thu, 01 Jan 1970 00:00:00 UTC";
}
}
</script>
</head>
<body>
<button onclick = 'addCookie()'>ADD</button>
<button onclick = 'listCookies()'>LIST COOKIES</button>
<button onclick = 'removeCookies()'>REMOVE</button>
<h3>Cookies List : </h3>
<p id = "list"></p>
</body>
</html>

Delete Cookie using max-age attribute

Here, max-age is set to 0 so no cookie will be stored. But you can increase the value to sustain the cookies in the example.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Delete max-age Cookie </title>
</head>
<body>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="name=Shubham Kandari;max-age=0";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not avaliable");
}
}
</script>
</body>
</html>

Delete Multiple Cookie

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Delete Multiple Cookie </title>
</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> <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> <br>
<input type="button" value="Display all cookies" onclick="displayCookie()">
<script>
function setCookie1()
{
document.cookie="name=Saurav Bisht";
cookie1= document.cookie;
}
function setCookie2()
{
document.cookie="name=Shubham Kandari";
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>

Recommended :

1 . How to use JavaScript ?
2 . Introduction to Events in JavaScript
3 . How to implement Array in JavaScript
4 . JavaScript Math

5 . Type Conversion
6 . All reserved keywords in JavaScript
7 . Create Simple Login Form
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors