JavaScript Cookies

Cookies lets you to store the user information in the web page. Cookies are basically the data, which are stored in a small text files, on the user's computer.

As cookies are simply a plain text data record of these 5 variable-length fields:

domain - domain name of the website
path - path to the directory or web page
expires - date when the cookie will expire
secure - if this field contains the word "secure", then the cookie only be retrieved with secure server, otherwise no such restrictions exists
name=value - cookies are set and then retrieved in the form of key/value pairs

JavaScript Create Cookie

To create cookie using JavaScript, the simplest way is to assign a string value to the object, document.cookie. Here is the general form to create a cookie:

document.cookie = "key1=value1;key2=value2;expires=date";

Here, expires attribute is optional. Provide a valid date and time to make cookie expires at that date and time. Here is an example to create a cookie:

username=fresherearth

Here is another example, creates a cookie with JavaScript:

document.cookie="username=Deepak Patel";

Here is another example, creates cookie having expiration date:

document.cookie="username=Anoop Patel; expires=Tue, 16 Dec 2013 12:00:00 UTC";

Here is one more example, shows how to set path the cookie belongs to with a path parameter like this:

document.cookie="username=Shivam Patel; expires=Tue, 16 Dec 2013 12:00:00 UTC; path=/";

JavaScript Read Cookie

Here is an example, shows how to read cookie with JavaScript:

var x = document.cookie;

Here, document.cookie will return all the cookies in one string much like cookie1=value; cookie2=value; cookie3=value;

JavaScript Change Cookie

Here is an example, shows how to change a cookie with JavaScript:

document.cookie="username=Deepak Patel; expires=Tue, 16 Dec 2013 12:00:00 UTC; path=/";

Now after performing this, the old cookie is overwritten.

JavaScript Delete Cookie

To delete cookie with JavaScript, simply set the expires parameter to a passed date. Here is an example, shows how to delete a cookie with JavaScript:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

JavaScript Cookie Example

Here is a complete example on JavaScript cookie:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Cookies Example</title>
   <script>
   function createCookie(cookieName,cookieValue,cookieexpirydays)
   {
      var d = new Date();
      d.setTime(d.getTime() + (cookieexpirydays*24*60*60*1000));
      var expires = "expires=" + d.toGMTString();
      document.cookie = cookieName+"="+cookieValue+"; "+expires;
   }
   function getCookie(cookieName)
   {
      var name = cookieName + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++)
      {
         var c = ca[i];
         while (c.charAt(0)==' ') c = c.substring(1);
         if (c.indexOf(name) == 0)
         {
            return c.substring(name.length, c.length);
         }
      }
      return "";
   }
   function checkCookie()
   {
      var user=getCookie("username");
      if (user != "")
      {
         alert("Hi " + user + "! Welcome to fresherearth.com");
      }
      else
      {
         user = prompt("Please enter your name: ","");
         if (user != "" && user != null)
         {
            createCookie("username", user, 30);
         }
      }
   }
   </script>
</head>
<body>

<input type="button" onclick="checkCookie()" value="Cookie">

</body>
</html>

Here is the sample output of the above cookie example using JavaScript:

Now click on the Cookie button to create the cookie. Here is the output produced after clicking on the Cookie button on Mozilla Firefox browser:

Now enter your name to create cookie and press on the OK button. Here we have entered fresherearth as name. After entering the name and clicking on the OK button, again click on the Cookie button, you will watch the following output:

Here is the live demo output of the above JavaScript cookie program. Now, just click on the Cookie button and type your name to create a cookie. Now click again on the Cookie button to watch the greeting:

JavaScript Online Test

« Previous Tutorial Next Tutorial »