Clear Cookie Example

Cookies can be deleted in the same way as they are created but with the expiry date set to any past date. The example below shows how to delete the cookie from the browser using JavaScript. The code below has saveCookie() method that is used to create the cookie of name passed as an argument into the method. Method readCookie() reads the cookie of name passed as an argument into the method. clearCookie() method deletes the cookie of name passed as an argument into the method. In this method the expiry date for the cookie is set to the date one day ago. So the cookie is considered to be expired and is deleted from the browser.

ClearCookieExample.html

<html>
<head>
<title>
Clear cookie example
</title>
<script type="text/javascript">

function saveCookie(name) {
var username = document.myCookieform.cookievalue.value;
if (!username)
alert('Please insert name in text box !');
else {
var date=new Date();
date.setDate(date.getDate()+1);
document.cookie = name + "=" + username+"; expires=" + date + "; path=/";
alert("Cookie, " + name + " successfully created.");
}
}

function readCookie(cookieName) {
if (document.cookie.length>0){
cookieStart=document.cookie.indexOf(cookieName + "=");
if (cookieStart!=-1){�
cookieStart=cookieStart + cookieName.length+1;�
cookieEnd=document.cookie.indexOf(";",cookieStart);
if (cookieEnd==-1) cookieEnd=document.cookie.length;
alert( "Value of cookie, "+ cookieName + ", is: " + unescape(document.cookie.substring(cookieStart,cookieEnd)));
}
else{
alert("Cookie, " + cookieName + ": Not Found.");
}
}
else{
alert("Cookie, " + cookieName + ": Not Found.");
}
}

function clearCookie(name) {
var date=new Date();
date.setDate(date.getDate()-1);
document.cookie = name+ "=''; expires=" + date + "; path=/";
alert('Successfully erased Cookie ' + name);
}

</script>
</head>
<body>
<form name="myCookieform">
Input Cookie Value <input type="text" name="cookievalue" />
</form>
<input type="button" onClick="saveCookie('mycookie');" value="Create Cookie" /><br>
<input type="button" onClick="readCookie('mycookie');" value="Read Cookie"/><br>
<input type="button" onClick="clearCookie('mycookie');" value="Clear Cookie"/><br>

</body>
</html>

The above code displays the page as given below.

You are asked to enter the value for the cookie 'mycookie' in the text box in the page and click on the 'Create Cookie' button. It floats the alert box showing the successful creation of the cookie.

Click on the 'Read Cookie' button to see the value assigned to the cookie.

To delete the cookie 'mycookie' press the button 'Clear Cookie'. It updates the cookie expiry date to the past date so cookie is deleted from the browser.

You can check the existence of the cookie 'mycookie' by clicking the 'Read Cookie' button. It will show an alert box indicating that the cookie is not present.

Clear cookie example

Clear cookie example

Clear Cookie Example

Tutorials