Introduction to Delete Cookie in JS
The following article provides an outline on Delete Cookie in JS(JavaScript). Cookies are small files that stores user information on the web page. Cookies basically stores the current and previous session of the user information in browser, so that when a user opens the browser next time the last login session will be restored. The user doesn’t have to enter all the details again the browser. We can do multiple things using cookies. We can create, read, change and delete a cookie.
How to Delete a Cookie in User System using JavaScript?
- Using Expire attribute.
- Using Max-age attribute.
- Using a web browser.
- Deleting a cookie session.
1. Expire Attribute
It provides ways to create a parameter to delete a cookie. It helps to create a persistent cookie and you don’t have to delete it manually, once the time expires the cookies will be deleted automatically.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Educba;expires=Sat, 20 Aug 2020 12:00:00 UTC";
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert(" The Cookie not available");
}
}
</script>
</body>
</html>Output:
2. Max-age Attribute
In Max-age attribute the cookie expiring or deletion time is represented in seconds. Once the current session expires the cookie will be deleted automatically.
Example:
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 " onclick="set()">
<input type="button" value="Get" onclick="get()">
<script>
function set()
{
document.cookie="name=EDUCBA;max-age=0";
}
function get()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("The Cookie not avaliable");
}
}
</script>
</body>
</html>Output:
3. Using Web Browser
It is one of the easiest methods to delete a cookie. You can just go to a browser setting and delete a cookie in a option given to delete a cookie. Each browser varies from one another in settings.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Set Cookie1" onclick="setCooki1()">
<input type="button" value="Get Cookie1" onclick="getCooki1()">
<input type="button" value="Delete Cookie1" onclick="deleteCooki1()">
<br>
<input type="button" value="Set Cookie2" onclick="setCooki2()">
<input type="button" value="Get Cookie2" onclick="getCooki2()">
<input type="button" value="Delete Cookie2" onclick="deleteCooki2()">
<br>
<input type="button" value="Dispaly all cookies" onclick="displayCookies()">
<script>
function setCooki1()
{
document.cookie="name=Educba";
cooki1= document.cookie;
}
function setCooki2()
{
document.cookie="name=Cba";
cooki2= document.cookie;
}
function getCooki1()
{
if(cooki1.length!=0)
{
alert(cooki1);
}
else
{
alert("Cookie Unavailable");
}
}
function getCooki2()
{
if(cooki2.length!=0)
{
alert(cooki2);
}
else
{
alert("Cookie Unavailable");
}
}
function deleteCooki1()
{
document.cookie=cookie+";max-age=0";
cooki1=document.cookie;
alert("Cooki1 deleted sucessfully");
}
function deleteCooki2()
{
document.cookie=cooki2+";max-age=0";
cooki2=document.cookie;
alert("Cooki2 deleted sucessfully");
}
function displayCookie()
{
if(cooki1!=0&&cooki2!=0)
{
alert(cooki1+" "+cooki2);
}
else if(cooki1!=0)
{
alert(cooki1);
}
else if(cooki2!=0)
{
alert(cookie2);
}
else{
alert("Cookie Unavailable");
}
}
</script>
</body>
</html>Output:
4. Deleting a Cookie Session
Session cookie are normal cookie without any expiry, it will be deleted once the browser is closed or session terminated.
Example:
Code:
Function() {
var cookiename = 'Cookie';
var options = { path: '/', expires: 12 };
$.cookie(cookiename, 'tests', option);
console.log( $.cookie(cookiename));
$.cookie(cookiename, null, options);
console.log( $.cookie( cookiename));
}Concept of Creating, Setting, Deleting Cookie
Code:
<script type="text/javascript">
<!
function getCookie(w){
Name = "";
hCOOKIES = new Array();
hCOOKIES = document.cookie.split('; ');
for(aa = 0; aa < hCOOKIES.length; a++){
NameValue = new Array();
NameValue = hCOOKIES[aa].split('=');
if(NameVal[0] == w){
dName = unescape(NameVal[1]);
}
}
return dName;
}
function printCookies(w){
dStr = "";
hCOOKIES = new Array();
hCOOKIES = document.cookie.split('; ');
for(aa = 0; aa < hCOOKIES.length; aa++){
NameVal = new Array();
NameVal = hCOOKIES[aa].split('=');
if(NameVal[0]){
dStr += NameVal[0] + '=' + unescape(NameVal[1]) + '; ';
}
}
return dStr;
}
function setCookie(cname, cvalue, cexpires, cpath, cdomain, csecure){
cookieStr = cname + "=" + escape(cvalue) + "; ";
if(cexpires){
cexpires = setExpiration(cexpires);
cookieStr += "cexpires=" + cexpires + "; ";
}
if(cpath){
cookieStr += "cpath=" + cpath + "; ";
}
if(cdomain){
cookieStr += "cdomain=" + cdomain + "; ";
}
if(csecure){
cookieStr += "csecure; ";
}
document.cookie = cookieStr;
}
function setExpiration(cookieLifes){
var today = new dDate();
var dexpr = new dDate(today.getTime() + cookieLife * 16 * 50 * 60 * 100);
return expr.toGMTString();
}
// -->
</script>Example for Calling the Cookie Functions
Code:
<script type="text/javascript">
<!--
setCookie('hasVisited', 'Yes');
cookieValue = getCookie('hasVisited');
alert(cookieValue)
setCookie('VisitedToday', 'Yes', 3);
setCookie('VisitedSite', 'Yes', 3, '/');
setCookie('cookieName', 'cookieValue', 3, '/members');
setCookie('cookieName', 'cookieValue', 3, '/members', '', 1);
setCookie('cookieName', 'cookieValue', 3, '/', 'educba');
allCookies = printCookies();
document.write(allCookies);
alert(allCookies);
setCookie('cookieName', '', -1);
// -->
</script>Conclusion
Deleting a cookie using a JavaScript has various advantages. It is easy, consumes less time and can be automated. Various method available to delete a cookie and we have seen in the above article in which each topic is explained with example. You can delete a cookie by setting a expire attribute, max-age attribute, web browser and session expiration. If there are more cookies in your system, then it will occupy more space. This is reason why we are deleting the cookies and using JavaScript it can be made easy.