Web applications work on HTTP protocol, a stateless protocol i.e once the web server processes a request for a web page, the web server will not remember anything about the client who has made the request. For example, consider a drop-down list with 3 background colors-red, green and blue. Select a red color and open a new tab and visit the same page. Now, the background of the page should be in red color. But, it will not appear as expected because the page does not remember the color that was selected previously. So, to overcome this and make a web application remember the settings, cookies are used.

Javascript Cookies are the small text files that are stored in the browser of visitor’s computer. Cookies help the server to quickly access the information of users who visit the same pages again and again. It can be a string of name-value pairs separated by semi-colons.

In JavaScript, document.cookie property is used to create, read, change and delete cookies. There are 3 options while creating Javascript Cookies. First thing is a name-value. Syntax for name-value cookie is : Second thing is Expiration date, which allows a cookie to stay on the user’s computer. When a user closes the browser, cookies will be deleted automatically. Syntax for adding the expiration date to a basic single cookie is : Third option is assigning a specific path name to a cookie. This is helpful when a page on the site to which the user returns is known. Syntax for adding a pathname to a cookie is as follows: The document.cookie property will return cookies in a single string. For example,

To read a Cookie, the syntax is as follows: To change a cookie, the above syntax can be used. To delete a cookie, you need not specify a value. Users need to set the expiration parameter to a date that has been passed. The syntax is as follows:

document.cookie looks like a text string but it is not. When writing to document.cookie property, cookie string is created i.e. when writing the entire string to a property, only the name-value pair of cookie string will be visible when the cookie is read. New cookies are added to document.cookie property and the property is read by the new string. Following is the syntax:

To write a value to a cookie, a function has to be written so that it searches only the specific value in a cookie string. For this purpose, JavaScript has 3 functions, they are:

1. setCookie
2. getCookie
3. checkCookie

This function creates/sets a new Cookie and stores the visitor's name in it. [c] function setCookie(cname, cvalue, exdays) { //declares the value of dt as current date var dt = new Date(); dt.setTime(dt.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+dt.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; }[/c] The above function contains 3 value names: cookie name, cookie value and expiration date. Using this function, the value of specified cookie can be returned. [c] function getCookie(cname) { var name = cname + "="; 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 ""; }[/c] This function verifies whether the cookie is set or not. [c] function checkCookie() { var username=getCookie("username"); if (username!="") { alert("Welcome again " + username); }else{ username = prompt("Please enter your name:", ""); if (username != "" && username != null) { setCookie("username", username, 365); } } }[/c] The above example checks if the cookie is set or not. If the cookie is set, the greeting will be displayed, otherwise, a prompt box opens asking for the username. After giving, the username will be stored for 365 days.

• Javascript Cookies help the server to quickly access the user information who visit the same page over and over.
• Javascript Cookies is created with a name-value pair.
• setCookie,getCookie and checkCookie are the two functions in JavaScript cookies.