20/1/12

 Cookies are a useful way of storing information on the client’s computer  Initially feared, when they first appeared and were considered a security threat  Today many web sites use cookies and today’s browser’s are configured to accept cookies by default 2

 Site personalization  E.g. ◦ Record name of returning visitor ◦ Keep track of shopping cart materials ◦ Register preferences 3

4 Address target market with some accuracy Help to determine the services that should be provided to the user Help inform changes to the web site Since cookies persist on the client’s computer, space does not need to be allocated on the web server to store user-specific information. Cookies can save small amounts of information for very long periods of time.

 Users can choose to configure their browsers not to accept cookies.  Cookies are unable to save large objects, arrays, or other complex data types.  Visitors to your site can delete cookies from there machines.  User may have multiple machines. 5

6

7

 Setting Cookies  Create a string in the form: cookie_name=value;  This sets the document.cookie property to that value 8

 Cookie values must never have spaces, commas, or semicolons.  The following functions will code and decode your properties: ◦ they are escape() ◦ and unescape() 9

Cookie1 function setCookie1()// write a function to set a cookie that is called on the event in the body { var name = prompt("What's your name?","");// variable name is equal to the value entered into the prompt box var cookie1 = escape("username:" + name);// declares a variable called cookie1 equal to username and name value, ESCAPE METHOD ENCRYPTS THE VALUES IN THE () document.cookie = cookie1;//SETS the cookie equal to the variable value set in the previous line } Click here to set a cookie Then click here to see an example of the cookie being read. 10

 Once you have set a cookie value you can then read it. 11

Cookie1 function readCookie1() //readCookie1 function called onclick in the body of the code { var cookie1= document.cookie; //we know there is a cookie set on our site so we need to access it var cookie1 = unescape(cookie1);//remove the padding from the cookie OR DECRYPT VALUES SET var breakcookie = cookie1.split(":");//split the cookie at the colon to access individual values var name = breakcookie[1]; //grabs the variable value after the colon, the breakcookie array starts at breakcookie[0] which would return username, //to access the value held in name variable we must refer to the second array element- breakcookie[1] alert("Your name is: " + name); //alert box returns the original value set by the cookie } Click here to set a cookie 12

 To store cookies between browser sessions, they must be given an expiry date which will control how long the browser holds it before clearing it from the cookie file. 13

var expires= new Date(); expires.setTime(expires.getTime() * 60 * 60 * 20 * days); ◦ Or var date1 = new Date("January 15, 2013"); var cookiedate = date1.toGMTString(); 14

 Adding expires=date to the cookie string and separating the different cookie components with a semicolon.  When this cookie is set, it will live on the user's hard drive until the expiration date. 15

 The expiration date also allows you to delete cookies you do not want users to have any more.  If you set the expiration date of a cookie to a time that has already passed, the cookie will be deleted from the cookie file. 16

Cookie1 function setCookie1() // write a function to set a cookie that is called on the event in the body { var name = prompt("What's your name?",""); // variable name is equal to the value entered into the prompt box var date1 = new Date("March 15, 2012"); //sets cookie expiry property to date above var cookiedate = date1.toGMTString(); var cookie1 = escape(name); // declares a variable called cookie1 document.cookie = cookie1 + cookiedate; //sets the cookie equal to the variable value set in the previous line } Click here to set cookie1 Then click here to see an example of the cookie being read.

Cookie1 function readCookie1() //readCookie1 function called onclick in the body of the code { var cookie1= document.cookie; var cookie1 = unescape(cookie1); //unescape function moves padding added when cookie was set var breakcookie = cookie1.split(); var name = breakcookie[0]; //grabs the variable value after the colon, the breakcookie array starts at breakcookie[0] which would return username, //to access the value held in name variable we must refer to the second array element- breakcookie[1] alert("Your cookie is: " + name); //alert box returns the original value set by the cookie } Click here to read cookie1

  cles/browse/cookie_1.shtml cles/browse/cookie_1.shtml  x x