JavaScript Cookies

What's a cookie anyway?

A cookie is a small piece of information stored by the web browser on the client machine in a text (.txt) file which can be retrieved later. A script/program either on server side or client side may request the web browser to store a cookie. Cookie information is stored as a name value pairs. JavaScript provides document.cookie property for manipulation of a client-side cookie. One can set the cookie property at any time. Cookies can be very useful for -

State Maintenance/Persistence across different pages of the site, for HTTP is a state less protocol. In english, it means cookies can be used for "remembering" certain data specific to the user (such as User ID) as he browses different pages of the site. Session variables used in server side scripts such as ASP make use of cookies for this purpose.
To allow user-side customization of web information, to serve a personalized site, as done by Yahoo and few others.

A cookie can be sent back only to the server which created it. Thus, allowing a two way communication of a cookie. Many web servers use this to store user preferences, user ID on the user machine; which are sent back to them when user revisits the same site. This information can then be used by the web server to enhance and personalize the user experience. The cookies are stored and sent by the web-browser, provided that it is cookie enabled.
Usually, cookies are pretty safe and most sites use them widely. Moreover, most sites will not work as desired if you disable cookies. You can find more information about cookies at Cookie Central and at Netscape.

Cookie in action

To understand how cookies work, enter your name in text field below, and click 'Set Cookie' button. This will place a cookie having your name on your machine. After placing a cookie, it will reload the page to force reading of the cookie. You will see the message "Welcome back your-name" at top just below the article title. To understand how the values are retained across pages click on any other link from the menu (top) or navigation bar (bottom). Then click back button of your browser to come back, you will notice that "Welcome back your-name" message is still there. To emphasize the point, close the browser, open it again and come back to this page. The welcome message with your name stays! This is called as State Maintenance/Persistence in jargon ;))

This particular cookie is valid for 1 month from the date of creation, hence if you visit the page within one month it will remember you and welcome you. To delete this cookie now, click here.

How do I use cookies?

As you must have noticed by now, the important steps in cookie manipulation are -

Create A Cookie - Create or set a cookie on user machine having cookie name, cookie value and the time when cookie should get deleted automatically (EXPIRES atribute, this is optional). If this is not specified the cookie is called a session cookie and it expires (gets deleted) when user's session ends, i.e. when the browser is closed. The additional information that can be optionally stored in the cookie includes (1)Path, (2)Domain, (3)Secure. Secure is used only over a secure communication channel ( currently only HTTPS).
Read The Cookie - Read the stored cookie and extract its value. This requires only cookie name. Remember that you can only read the cookie which is created by your script/program.
Delete The Cookie - This may not be always done, as expires attribute takes care of it. To delete a cookie set/create a cookie with the exactly same PATH (if any) and NAME values, and an EXPIRES value which is in the past.

The JavaScript code here lets you manipulate cookies by using three function to do above mentioned tasks. For creating a cookie, for reading a cookie and for deleting a cookie. The cookie functions are provided in a reusable .js file (named as cookies.js) which also contains function documentation. The function prototypes and usage -

function setCookie(szName, szValue [,szExpires] [,szPath] [,szDomain] [,bSecure]) - To create/set a cookie. It requires at least two arguments szName and szValue, and 4 optional arguments -
1. szExpires - A Date object specifying the date on which the cookie expires.
2. szPath - A string argument specifying path, / is the common value.
3. szDomain - A string argument specifying the domain attribute for this cookie.
4. bSecure - A boolean value (true/false), if this cookie is meant for communication over a secure channel, for HTTPS cookies only.
This function creates a cookie string from the given arguments (by URL encoding name=value attributes), and sets the cookie as -
document.cookie = szCookieText; //constructed cookie string
function getCookie(szName) - To read the cookie set by setCokie(...) function. The only argument which it takes is the cookie name szName, which is set by the previous function. This function returns the cookie value read, which can be parsed if necessary, to get the required data.
This function simply parses document.cooke for the given cookie name, and returns the extracted cookie value in the original format (by URL decoding the value).
function deleteCookie(szName) - You can use this function optionally to delete the cookie. It takes only one parameter cookie name, szName and deletes the cookie immediately.
This function simply sets the same cookie with an expires attribute which is in the past, thus deleting it immediately irrespective of the original expires attribute.

	Download JavaScript Cookies file (3.4 KB)
If clicking on "Download..." does not work for you, right click and choose "Save Target As..."(IE) or "Save Link As.." (NN) or equivalent from your browser pop up menu.

You can include this file in your HTML file(s), to create and read cookies easily by calling these functions without any modification. As an example, consider creating and reading a cookie that is used in this page, using these functions -

	 	  		  //for creating a cookie
<script type="text/javascript">
<!--
   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookie("technofundoDemoCookie", "Manish", nextMonth);
// -->
</script>

This will set a cookie named 'technofundoDemoCookie' with value 'Manish' on the user machine which expires one month after its creation. It uses only 3 arguments of the available 6 ones.

	 	  		  //for reading the cookie
<script type="text/javascript">
<!--
  	var szName = getCookie("technofundoDemoCookie");
// -->
</script>

In this code snippet, the variable szName will contain the value of the cookie named 'technofundoDemoCookie' which has been set earlier. This variable can be later used as required.

	 	  		  //for deleting the cookie
<script type="text/javascript">
<!--
  	deleteCookie('technofundoDemoCookie');
// -->
</script>

It simply calls the deleteCookie() function with the cookie name 'technofundoDemoCookie' to delete the cookie.

In the end

Although cookies are very useful for all these reasons and perhaps more, here are few things you should know.

The browser or user can delete cookies before its expires.
Many people can share one machine and one person can use multiple machines, so cookies are not always reliable completely.
Do not rely only on cookies for state maintenance/persistence, support it with server side as well.
Do not store sensitive information in cookies.
Do respect user privacy.

I hope you find this article and code useful, do about this article and the code. If there are any problems/bugs let me know, and of course, disclaimer is implied. I hope you use this code creatively to enhance your site. Happy coding and debugging ;))

Author : Manish Hatwalne.