Coding, JavaScript / JQuery

Working with JavaScript Cookies

The HTTP protocol is state-less, so once the server has sent a page to a browser requesting it, it doesn’t remember a thing about it. A ‘cookie’ is a small piece of text data set by a Web server that resides o the client’s machine. Once it’s been st the client automatically retruns the cookie to the web server with each request that it makes. This allows the server to place values it wishes to “remember” int he cookie, and have access to them when creating a response.

The most common application of this technology is the identification of individual users. Typically, a site will have a user log in and will then set a cookie containing the apporpriate username. From that point on, whenever the user makes a request to that particular site, the browser sends the username cookie in addition to the usual information to the server. The server then keep track of which user it is serving pages to and modify its behavior accordingly. This way many web-based e-mail systems knows that you are logged in.

Cookies in JavaScript:

 name=value[;expires=date][;domain=domain][;path=path][;secure]

Tokens enclosed in brackets are optional and may appear in any order. The name-value pair contains the actual data, expires set the expiry date after which it is no longer valid. The domain and path of the server it should be sent to. As soon as you request a page from a server to which a cookie should be sent, the cookie is added to the HTTP header. Server side programs can then read out the information and decide that you have the right to view the page you requested.
The path specifies a directory where the cookie is active. So if you want the cookie to be only sent to pages in the directory test, set the path to /test. Usually the path is set to /, which means the cookie is valid throughout the entire domain.

Cookies are exposed as the ‘cookie’ property of the ‘Document’ object. This property is both readable and writable. When any string is assigned to document.cookie, the browser parses it as a cookie and adds it to its list of cookies.

For example:
document.cookie = “username’=bill; expires=Sun, 26-Aug-2007 08;00:00 GMT;path=/home
set a cookie named username with value ‘bill’ that expires in 2007 and will be sent whenever a request is made for a file under the /home directory.

The following three scripts create, read and delete a cookie:

function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 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,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

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

Using cookies for User State Management:

Cookies are used to store state information. The kind of information to be stored is depended upon the need of the application.
For example, cookies are used to personalize Web search engines, to allow users to participate in WWW-wide contests and to store shopping lists of items a user has selected while browsing through a virtual shopping mall.

Essentially, cookies make use of user-specific information transmitted by the Web server onto the user's computer so that the information might be available for later access by itself or other servers. In most cases, not only does the storage of personal information into a cookie go unnoticed, so does access to it. Web servers automatically gain access to relevant cookies whenever the user establishes a connection to them, usually in the form of Web requests.