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 -
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 ;))

Enter Your Name :
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 - 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 -
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.
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.