1. ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming cookies

2. ECA 225 Applied Interactive Programming2 cookies  cookies are small text files stored on the client’s computer  they can be used to store bits of information that can be used again and again  user’s name  password  date of last visit  preferences

3. ECA 225 Applied Interactive Programming3 serving cookies  cookies must be served up from a server, not simply loaded into a browser  Servers include:  IIS  Apache  Xitami  PWS

4. ECA 225 Applied Interactive Programming4 multiple cookie example strInitialVisit  3/13/2003 at 15:23.  www.justustwo.com/ ECA225/  034709853442961766120982864029592910* userName  Michael Barath  www.justustwo.com/ ECA225/  034709853442961766120982864029592910* lastVisit  10/7/2003 at 11:41.  www.justustwo.com/ ECA225/  034709853442961766120982864029592910* compareLastVisit  Tue Oct 7 23:41:25 EDT 2003  www.justustwo.com/ECA225/  0347098534429617661210428 64029592910*visitCounter  38  www.justustwo.com/ECA225/  034709853442961766121092864029592910*

5. ECA 225 Applied Interactive Programming5 multiple cookie example cont …  previous example holds 5 cookies  strInitialVisit  userName  lastVisit  compareLastVisit  visitCounter

6. ECA 225 Applied Interactive Programming6 cookie parts  name / value pair  mandatory  expiration date  domain name  path  secure mode

7. ECA 225 Applied Interactive Programming7 cookie parts cont … userName  Michael Barath  www.justustwo.com/ECA225/  073082316829570567294051024029546435 * name/value pair domain & path expiration date

8. ECA 225 Applied Interactive Programming8 cookie parts cont …  name / value pair  mandatory  EG, userName = Michael  name of the cookie is userName  value associated with userName is ‘Michael’  all names and values must be strings

9. ECA 225 Applied Interactive Programming9 cookie parts cont …  expiration date  by default, cookies only last through the current browser session  when the browser is closed, the cookie perishes  to create a cookie which persists, set the expires attribute  expiration date can be any valid string date

10. ECA 225 Applied Interactive Programming10 cookie parts cont …  domain and path  a cookie always contains the address of the server that sent it  a cookie can only be read by the server which created it to begin with  by default, the browser sets the domain and path to the directory where the script resides – only scripts within that directory can access the cookie  to make the cookie accessible to all scripts on the server overwrite the default: http://www.domain_name.com/

11. ECA 225 Applied Interactive Programming11 cookie parts cont …  secure  tells the server whether or not a secure connection is needed to access the cookie  if the attribute is set, the cookie can only be sent over a secure connection

12. ECA 225 Applied Interactive Programming12 writing a cookie  a cookie is an object  the cookie object is an attribute of the document object  refer to the cookie using dot notation document.cookie

13. ECA 225 Applied Interactive Programming13 writing a cookie cont …  to write a cookie holding the user’s name  get user input  variable userName holds value, eg, ‘Michael’  write the cookie by assigning a properly formatted string to document.cookie var userName = prompt( ‘Please enter your name’, ‘ ‘ );

14. ECA 225 Applied Interactive Programming14 writing a cookie cont …  the cookie after it is written  the syntax for writing the cookie userName  Michael document.cookie = “userName=” + userName;

15. ECA 225 Applied Interactive Programming15 writing a cookie cont …  the previous example is a temporary cookie – it will perish as soon as the browser is closed  to set a cookie that persists, add an expiration date  to set a date object to 6 months in the future: var exp = new Date( ); exp.setMonth( exp.getMonth( ) + 6 );

16. ECA 225 Applied Interactive Programming16 writing a cookie cont …  use the same document.cookie assignment to add an expiration date  separate the name/value pair from the expiration date with a ; ( semicolon )  after the semicolon, type the keyword expires  assign the newly set expiration date to expires

17. ECA 225 Applied Interactive Programming17 writing a cookie cont …  cookies can only contain strings  convert the exp Date object to a string the JavaScript method.toGMTString( )  concatenate, assign to document.cookie document.cookie = “userName=” + username + “;expires=” + exp.toGMTString( ); string variable Date object converted to string

18. ECA 225 Applied Interactive Programming18 cookie script if( document.cookie != "" ) { userName = cookieVal( "userName" ); } // end if else { userName = window.prompt( "Please enter your first name", "" ); setUserName(); } // end else function setUserName() { document.cookie = "userName=" + userName + ";expires=" + exp.toGMTString(); } // end function

19. ECA 225 Applied Interactive Programming19 cookie script cont …  test to see if any cookies from this particular server already exist  if cookies exist, this statement returns TRUE  if no cookies exist, the else statement is executed if( document.cookie != "" ) { userName = cookieVal( "userName" ); }

20. ECA 225 Applied Interactive Programming20 cookie script cont …  the else statement calls a prompt box asking for the user’s name  a user-defined function named setUserName( ) is called to write the string to a cookie else { userName = window.prompt(‘Please enter your first name’, ‘ ‘); setUserName( ); }

21. ECA 225 Applied Interactive Programming21 cookie script cont …  a cookie named userName is created, holding the value ‘Michael’, and expires in 6 months  a drawback to this example is the expiration date never changes function setUserName() { document.cookie = "userName=" + userName + ";expires=" +exp.toGMTString(); } // end of function

22. ECA 225 Applied Interactive Programming22 reading cookies  if the cookie already exists, we call cookieVal( ) to obtain the value associated with the cookie  in the function call we pass cookieVal( ) the name of the cookie (‘userName’) and assign the result to a variable of the same name if( document.cookie != "" ) { userName = cookieVal( "userName" ); }

23. ECA 225 Applied Interactive Programming23 reading cookies cont … function cookieVal( cookieName ) { thisCookie = document.cookie.split("; "); for( i = 0; i < thisCookie.length; i++ ) { if( cookieName == thisCookie[i].split("=")[0] ) { return thisCookie[i].split("=")[1]; } // end if } // end for return 0; } // end function

24. ECA 225 Applied Interactive Programming24 reading cookies cont …  the split( ) method takes one argument, a string delimiter  the delimiter separates the cookie string into distinct parts  split( ) returns an array of values, split where ever the delimiter occurs thisCookie = document.cookie.split("; ");

25. ECA 225 Applied Interactive Programming25 reading cookies cont …  a cookie string which originally reads as will now be an array named thisCookie which contains one element ( ‘userName=Michael) thisCookie = ( ‘userName=Michael’ )

26. ECA 225 Applied Interactive Programming26 reading cookies cont …  multiple cookies, eg, ECA225 website  contains 5 cookies  each name=value pair is separated by a semicolon strInitialVisit userName lastVisit compareLastVisit visitCounter

27. ECA 225 Applied Interactive Programming27 reading cookies cont … creates the following array with 5 elements thisCookie = (‘strInitialVisit=3/13/2003 at 15:23’, ‘userName=Michael’, ’lastVisit=10/7/2003 at 11:41’, ’compareLastVisit=Tue Oct 7 23:41:25 EDT 2003’, ‘visitCounter=38’ ) thisCookie = document.cookie.split("; ");

28. ECA 225 Applied Interactive Programming28 reading cookies cont …  run the array through a for loop which evaluates each value of the thisCookie array for( i = 0; i < thisCookie.length; i++ ) { if( cookieName == thisCookie[i].split("=")[0] ) { return thisCookie[i].split("=")[1]; } // end if } // end for

29. ECA 225 Applied Interactive Programming29 reading cookies cont …  inside the for loop is another split( )method which separates each value of the thisCookie array into a second array, split on the = the new arrays look like this: if( cookieName == thisCookie[i].split("=")[0] ) { ( ‘userName’, ‘Michael’ )

30. ECA 225 Applied Interactive Programming30 reading cookies cont …  the if statement checks if the cookie name we passed into the function matches any of the array values at index 0, after the second split if( cookieName == thisCookie[i].split("=")[0] ) { ( ‘userName’, ‘Michael’ ) userName

31. ECA 225 Applied Interactive Programming31 reading cookies cont …  if it matches, the function returns the array value at index 1, after the second split if( cookieName == thisCookie[i].split("=")[0] ) { return thisCookie[i].split("=")[1]; userName Michael

32. ECA 225 Applied Interactive Programming32 reading cookies cont …  if a value is returned, it is assigned to a variable in the initial if statement, which we can use in our script as we want if( document.cookie != "" ) { userName = cookieVal( "userName" ); }

33. ECA 225 Applied Interactive Programming33 updating expiration date if( document.cookie != "" ) { userName = cookieVal( "userName" ); setUserName( ); } // end if else { userName = window.prompt( "Please enter your first name", "" ); setUserName(); } // end else function setUserName() { document.cookie = "userName=" + userName + ";expires=" + exp.toGMTString(); } // end function