ECA 225

1. ECA 225 AppliedOnline Programming cookies ECA 225 Applied Interactive Programming

2. 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 ECA 225 Applied Interactive Programming

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

4. 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/034709853442961766121042864029592910*visitCounter38www.justustwo.com/ECA225/034709853442961766121092864029592910* ECA 225 Applied Interactive Programming

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

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

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

8. 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 ECA 225 Applied Interactive Programming

9. 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 ECA 225 Applied Interactive Programming

10. 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/ ECA 225 Applied Interactive Programming

11. 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 ECA 225 Applied Interactive Programming

12. writing a cookie • a cookie is an object • the cookie object is an attribute of the document object • refer to the cookie using dot notationdocument.cookie ECA 225 Applied Interactive Programming

13. 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’, ‘ ‘ ); ECA 225 Applied Interactive Programming

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

15. 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 ); ECA 225 Applied Interactive Programming

16. 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 ECA 225 Applied Interactive Programming

17. 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 variable string document.cookie = “userName=” + username + “;expires=” + exp.toGMTString( ); string Date object converted to string ECA 225 Applied Interactive Programming

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

19. 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" );} ECA 225 Applied Interactive Programming

20. 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( );} ECA 225 Applied Interactive Programming

21. 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 ECA 225 Applied Interactive Programming

22. 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" );} ECA 225 Applied Interactive Programming

23. 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 ECA 225 Applied Interactive Programming

24. 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("; "); ECA 225 Applied Interactive Programming

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

26. reading cookies cont … • multiple cookies, eg, ECA225 website • contains 5 cookies • each name=value pair is separated by a semicolon strInitialVisituserNamelastVisitcompareLastVisitvisitCounter ECA 225 Applied Interactive Programming

27. reading cookies cont … thisCookie = document.cookie.split("; "); 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’ ) ECA 225 Applied Interactive Programming

28. 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 ECA 225 Applied Interactive Programming

29. 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’ ) ECA 225 Applied Interactive Programming

30. 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 ( ‘userName’ , ‘Michael’ ) if( cookieName == thisCookie[i].split("=")[0] ) { userName userName ECA 225 Applied Interactive Programming

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

32. 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" );} ECA 225 Applied Interactive Programming

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