Create, Fetch and Delete Cookies using Javascript

In this article, I will explain how to Create, Fetch and Delete cookies using javascript. Cookies are small information can be stored in browsers and easily fetch and delete these cookies. Here i used three functions getcookie, setCookie and eraseCookie functions corresponding to create, retrieve or delete cookie.

Create, Fetch and Delete Cookies using Javascript

Cookie is a small piece of information which can be stored in users browsers. As we know, javascript is used for client side validation so that the client browser itself can validate without server side validation. In this article, I had explained about how to set, get and delete the cookies in web browser using Javascript.

Create the Cookie

In this function setcookie there are three parameters cookiename, cookievalue, expiredays


function setCookie(cookiename,cookievalue,expiredays)
{
	var expiredate=new Date();
	expiredate.setDate(expiredate.getDate() + expiredays);
	var cookie_value=escape(cookievalue) + ((expiredays==null) ? "" : "; expires="+ expiredate.toUTCString());
	document.cookie= cookiename + "=" + cookie_value;
}

Explanation:
In this setCookie function the first line is as follows:


var expiredate=new Date();

expiredate variable is added with expire days so that it will have current date with expire days value by using setDate. cookie_value is a variable declared and set expireday is null it will set null or else it will set expires values expiredate.

Fetching the Cookie

Code to fetch the cookie. In this below code, I had declared getCookie method which requires cookiename as parameter.


function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

Delete the Cookie

Following is the code to delete the cookie. I used eraseCookie funtion to delete the cookie. I am passing empty string value and -1 expire days set that one day ago that the cookie is expired into the setCookie function. So that browser will delete automatically the cookie if it is expired by one day and passing empty value inside the setCookie functon.


function eraseCookie(name) 
{
    setCookie(name,"",-1);
}

Following is the sample code for creating, retrieving and deleting cookies in the broswer.

Here i used one textbox and three buttons to set, retrieve and delete cookies.


<!DOCTYPE html>
<html>
<head>
<script>
function checkandsetCookie()
{
  var text = document.getElementById('text_name');
  if (text.value == '')
  {
   alert("Give some values of the Cookie.");
   document.getElementById('text_name').focus();
  }
  else 
  {
 
   if (text.value != '')
    {
    setCookie("cokieename",text.value,365);
    alert("Cookie saved correctly");
    text.value ='';
    }
  }
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
 var text = document.getElementById('text_name');
 var cookiename=getCookie("cokieename");
 if(cookiename !=null && cookiename !="")
 {
  text.value = cookiename;
 }
 else 
 {
  alert("cookie not found");
 }
}


function eraseCookie() 
{
 //setting -1 will automatically expire the cokiee and passing empty value.
 setCookie("cokieename","",-1);
 alert("Cookie is deleted.");
 //clearing textbox values
 var text = document.getElementById('text_name');
 text.value ='';
}
</script>
</head>
<body>
<input type="text" name="text_name"/>
<input type="button" value="Set cookie" onclick="checkandsetCookie();"/>
<input type="button" value="Retrieve cookie" onclick="checkCookie();"/>
<input type="button" value="Delete cookie" onclick="eraseCookie();"/>

</body>
</html>

I had attached sample.html file for reference.

Attachments

Create, Fetch and Delete Cookies using Javascript (44678-33434-sample.html)