Home >>Javascript Tutorial >JavaScript delete cookies

JavaScript delete cookies

Deleting Cookies in the JavaScript

Deleting cookies in JavaScript is allowed and it can be done in various ways However, there are three main ways to delete a cookie in JavaScript that are mentioned ahead. In JavaScript, there are various ways to update the cookies and assigning a value-pair in it. Here are the few ways through which you can delete a cookie in JavaScript:

These are the simplest ways to delete a cookie in JavaScript:

  • By using expire attribute.
  • By using max-age attribute.
  • A cookie can be deleted explicitly, by using a web browser.

Here are some of the examples depicting the deletion of cookies in JavaScript

1. In the following example, expire attribute is used to delete a cookie by delivering the expiry date.

<!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. Here in this example, max-age attribute is used to delete a cookie by delivering zero or negative number representing seconds to it.

<!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.This following example is a depiction of how to set, get, and delete multiple cookies.

<!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. Here is an example depicting deletion of a cookie explicitly.

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