Cookies

Javascript Cookies

Cookie

• A cookie is a piece of text that a Web server can store on a user's hard disk. Cookies allow a Web site to store information on a user's machine and later retrieve it.For example, a Web site might generate a unique ID number for each visitor and store the ID number on each user's machine using a cookie file.

when are cookies created.

• when you load a webpage,click on ads, submit forms.

what does the text file consists of

• name-value pair containing the actual data
• expiry date
• path and domain of the server to which the cookie details should be sent to.

Sample cookie file 

UserID    A9A3BECE0563982D    www.goto.com/

It is possible to retrieve other cookie information stored on the user's system.

Types of cookie

• Firt Party Cookies are written by your site and can only be read by your site.
• Third Party Cookies are created by advertising in your page that is loaded from a third party site. These can only be read by the advertising code on any site displaying the same ads.
• Session Cookies are not actually written to a file but are stored in the browser itself. These cookies only last as long as the browser is open.

what are the steps involved in cookie creation.

• If you type the URL of a Web site into your browser, your browser sends a request to the Web site for the page  For example, if you type the URL http://www.google.com into your browser, your browser will contact Google's server and request its home page.
• When the browser does this, it will look on your machine for a cookie file that google has set. If it finds an Google cookie file, your browser will send all of the name-value pairs in the file to google's server along with the URL. If it finds no cookie file, it will send no cookie data.
• Google's Web server receives the cookie data and the request for a page. If name-value pairs are received, Google can use them.
• If no name-value pairs are received, Google knows that you have not visited before. The server creates a new ID for you in Google's database and then sends name-value pairs to your machine in the header for the Web page it sends. Your machine stores the name-value pairs on your hard disk.
• The Web server can change name-value pairs or add new pairs whenever you visit the site and request a page.

There are other pieces of information that the server can send with the name-value pair. One of these is anexpiration date. Another is a path (so that the site can associate different cookie values with different parts of the site).

How are cookies useful?

• Track the number of site visitors

Sites can accurately determine how many people actually visit the site. the only way for a site to accurately count visitors is to set a cookie with a unique ID for each visitor. Using cookies, sites can determine how many visitors arrive, how many are new versus repeat visitors and how often a visitor has visited. 

• customization

For example, if you visit msn.com, it offers you the ability to "change content/layout/color." It also allows you to enter your zip code and get customized weather information. 

• E-commerce sites can implement things like shopping carts and "quick checkout" options. 

How to create a cookie using javascript.

1. Create the front end to capture the cookie value.

<form name="f1">

Enter the cookie value<input type="text" name="cookievalue" />

<input type="button" value="create cookie1" onclick="createcookie('cookie1')" />

<form>

    2. now create the function createcookie.

function createcookie(name){

  var x=document.f1.cookievalue.value;

  if(!x){

  alert("enter values");

  }

  else{

  callcookie(name,x,2); // created cookie for 2 days

  alert('cookie created');

  }

}

3. Create function call cookie which is the main cookie creation;

  

function callcookie(name,value,days){

 if(days){

  var d=new Date();

  d.setTime(d.getTime()+(days*24*60*60*1000));

  var expires = "; expires="+d.toGMTString();

  }

  else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

4. Now we have created the cookie, its time to read the created cookie

create a button or s link so that we can call the function readcookie

<input type="button" value="read cookie" onclick="readcookie('cookie1')" />

5. Create the function readcookie

function readcookie(name){

var allcookie=document.cookie;

var cookiesplit=allcookie.split(';');

for(var i=0;i<cookiesplit.length;i++){

   name=cookiesplit[i].split("=")[0];

   value=cookiesplit[i].split("=")[1];

   alert("cookie is : " + name + " and Value is : " + value);

}

}

6. Delete/clear the Cookie.

<input type="button" value="delete cookie1" onclick="eraseCookie('cookie1')" />

7. Create the function eraseCookie

function eraseCookie(name) {

callcookie(name,"",-1);//by setting day to -1 it clears the cookie

}

you can check the cookie creation by entering the value in the below text field.

Enter the cookie value