Post on 15-Dec-2015
transcript
ECA 225 Applied Interactive Programming
1
ECA 225
AppliedOnline
Programmingcookies
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 againuser’s namepassworddate of last visitpreferences
ECA 225 Applied Interactive Programming
3
serving cookies
cookies must be served up from a server, not simply loaded into a browser
Servers include: IISApacheXitamiPWS
ECA 225 Applied Interactive Programming
4
multiple cookie example
strInitialVisit3/13/2003 at 15:23.www.justustwo.com/ECA225/034709853442961766120982864029592910*userNameMichael Barathwww.justustwo.com/ECA225/034709853442961766120982864029592910*lastVisit10/7/2003 at 11:41.www.justustwo.com/ECA225/034709853442961766120982864029592910*compareLastVisitTue Oct 7 23:41:25 EDT 2003www.justustwo.com/ECA225/034709853442961766121042864029592910*visitCounter38www.justustwo.com/ECA225/034709853442961766121092864029592910*
ECA 225 Applied Interactive Programming
5
multiple cookie example cont …
previous example holds 5 cookies strInitialVisituserName lastVisitcompareLastVisitvisitCounter
ECA 225 Applied Interactive Programming
6
cookie parts
name / value pairmandatory
expiration date domain name path secure mode
ECA 225 Applied Interactive Programming
7
cookie parts cont …
userName Michael Barath www.justustwo.com/ECA225/ 073082316829570567294051024029546435*
name/value pair
domain & path
expiration date
ECA 225 Applied Interactive Programming
8
cookie parts cont …
name / value pairmandatoryEG, userName = Michael
name of the cookie is userNamevalue associated with userName is ‘Michael’
all names and values must be strings
ECA 225 Applied Interactive Programming
9
cookie parts cont …
expiration dateby default, cookies only last through the current
browser sessionwhen the browser is closed, the cookie perishes to create a cookie which persists, set the expires
attributeexpiration 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 notation
document.cookie
ECA 225 Applied Interactive Programming
13
writing a cookie cont …
to write a cookie holding the user’s nameget 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
userNameMichael
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
document.cookie = “userName=” + username + “;expires=” + exp.toGMTString( );
string
string
variable
Date object converted to string
ECA 225 Applied Interactive Programming
18
cookie scriptif( document.cookie != "" ) {
userName = cookieVal( "userName" );} // end ifelse {userName = window.prompt( "Please enter your first
name", "" );setUserName();} // end else
function 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 forreturn 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 as
will 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 …
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("; ");
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
if( cookieName == thisCookie[i].split("=")[0] ) {
( ‘userName’ , ‘Michael’ )
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
if( cookieName == thisCookie[i].split("=")[0] ) {return thisCookie[i].split("=")[1];
userName userName
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 dateif( 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