Sunday, December 30, 2012


Javascript Cookies

  • A cookie is a piece of text that 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
  • 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 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, 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')" />

    2. now create the function createcookie.

function createcookie(name){

  var x=document.f1.cookievalue.value;


  alert("enter values");


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

  var d=new Date();
  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++){
   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

Informative Javascript

No comments:

Post a Comment