Copyright ©2005  Department of Computer & Information Science Working with Cookies

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand the different types of cookies.Understand the different types of cookies. Understand how JavaScript keeps track of cookies using the document.cookie object.Understand how JavaScript keeps track of cookies using the document.cookie object. continued …

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand how to create new cookies.Understand how to create new cookies. Understand how to set an expiration date for a cookie.Understand how to set an expiration date for a cookie. Understand how to delete a cookie.Understand how to delete a cookie. Understand how to update a cookie’s value.Understand how to update a cookie’s value.

Copyright ©2005  Department of Computer & Information Science What is a Cookie? A cookie is a small text file that JavaScript can use to store customized information about a user.A cookie is a small text file that JavaScript can use to store customized information about a user. There are two types of cookies:There are two types of cookies: –Session Cookies (aka Transient Cookies) –Persistent Cookies

Copyright ©2005  Department of Computer & Information Science Session Cookies A browser stores session cookies in memory.A browser stores session cookies in memory. Once a browser session ends, browser loses the contents of a session cookie.Once a browser session ends, browser loses the contents of a session cookie.

Copyright ©2005  Department of Computer & Information Science Persistent Cookies Browsers store persistent cookies to a user’s hard drive.Browsers store persistent cookies to a user’s hard drive. We can use persistent cookies to customize information about a user that we can use when the user returns to a website at a later date.We can use persistent cookies to customize information about a user that we can use when the user returns to a website at a later date.

Copyright ©2005  Department of Computer & Information Science Cookies as Objects JavaScript deals with cookies as objects.JavaScript deals with cookies as objects. Specifically, JavaScript works with cookies using the document.cookie attribute.Specifically, JavaScript works with cookies using the document.cookie attribute. We can read information from cookies by examining the document.cookie object.We can read information from cookies by examining the document.cookie object.

Copyright ©2005  Department of Computer & Information Science Examples of Cookie Uses User preferencesUser preferences Saving form dataSaving form data Assisting with conveying information to back-end programsAssisting with conveying information to back-end programs Tracking online shopping habitsTracking online shopping habits

Copyright ©2005  Department of Computer & Information Science Parts of a Cookie Object name – An identifier by which we reference a particular cookie.name – An identifier by which we reference a particular cookie. value – The information we wish to save, in reference to a particular cookie.value – The information we wish to save, in reference to a particular cookie. expires – A GMT-formatted date specifying the date (in milliseconds) when a cookie will expire.expires – A GMT-formatted date specifying the date (in milliseconds) when a cookie will expire.

Copyright ©2005  Department of Computer & Information Science Parts of a Cookie Object path – Specifies the path of the web server in which the cookie is valid. By default, set to the path of the page that set the cookie. However, commonly specified to /, the root directory.path – Specifies the path of the web server in which the cookie is valid. By default, set to the path of the page that set the cookie. However, commonly specified to /, the root directory. domain – Specifies the domain for which the cookie is valid. Set, by default, only to the full domain of a page. You may wish to extend the domain to include other computers in your domain.domain – Specifies the domain for which the cookie is valid. Set, by default, only to the full domain of a page. You may wish to extend the domain to include other computers in your domain. secure – Specifies that a web browser needs a secure HTTP connection to access a cookie.secure – Specifies that a web browser needs a secure HTTP connection to access a cookie.

Copyright ©2005  Department of Computer & Information Science Cookie Limitations A given domain may only set 20 cookies per machine.A given domain may only set 20 cookies per machine. A single browser may only store 300 cookies.A single browser may only store 300 cookies. Browsers limit a single cookie to 4KB.Browsers limit a single cookie to 4KB.

Copyright ©2005  Department of Computer & Information Science Setting a Cookie – General Form window.document.cookie = “cookieName = cookieValue [; expires = expireDate] [; path = pathName] [; domain = domainName] [; secure]”;

Copyright ©2005  Department of Computer & Information Science Escape Sequences When we set cookie values, we must first convert the string values that set a cookie so that the string doesn’t contain white space, commas or semi-colons.When we set cookie values, we must first convert the string values that set a cookie so that the string doesn’t contain white space, commas or semi-colons. We can use JavaScript’s intrinsic escape() function to convert white space and punctuation with escape sequences.We can use JavaScript’s intrinsic escape() function to convert white space and punctuation with escape sequences. Conversely, we can use unescape() to view text encoded with escape().Conversely, we can use unescape() to view text encoded with escape().

Copyright ©2005  Department of Computer & Information Science Using the Cookie Library A great, open-source, tool is Bill Dortch’s Cookie Library, which contains a plethora of useful functions for dealing with cookies.A great, open-source, tool is Bill Dortch’s Cookie Library, which contains a plethora of useful functions for dealing with cookies. To use the functions, include the syntax on the next slide in your scripts …To use the functions, include the syntax on the next slide in your scripts …

Copyright ©2005  Department of Computer & Information Science Including the Cookie Library </script>

Copyright ©2005  Department of Computer & Information Science Calculation Expiration Dates JavaScript stores dates as the number of milliseconds since 01/01/1970.JavaScript stores dates as the number of milliseconds since 01/01/1970. To calculate a new date, we would use a formula derived from milliseconds.To calculate a new date, we would use a formula derived from milliseconds. For example, 1 year in milliseconds: year = (365 * 24 * 60 * 60 * 1000)For example, 1 year in milliseconds: year = (365 * 24 * 60 * 60 * 1000)

Copyright ©2005  Department of Computer & Information Science Calculating Expiration Dates var dNow = new Date(); var intTime = new Number(); intTime = dNow.getTime() + (365 * 24 * 60 * 60 * 1000); var dExpire = new Date(intTime);

Copyright ©2005  Department of Computer & Information Science Calling SetCookie() We can call the SetCookie() function from the Cookie Library using the following syntax: SetCookie(name, value [, expires] [, path] [, domain] [, secure]);We can call the SetCookie() function from the Cookie Library using the following syntax: SetCookie(name, value [, expires] [, path] [, domain] [, secure]);

Copyright ©2005  Department of Computer & Information Science Open the file called usingCookies_01.html

Copyright ©2005  Department of Computer & Information Science Calling GetCookie() We can call the GetCookie() function from the Cookie Library using the following syntax: GetCookie(cookieName);We can call the GetCookie() function from the Cookie Library using the following syntax: GetCookie(cookieName);

Copyright ©2005  Department of Computer & Information Science Open the file called usingCookies_02.html

Copyright ©2005  Department of Computer & Information Science Calling DeleteCookie() We can call the DeleteCookie() function from the Cookie Library using the following syntax: DeleteCookie(name, [, path] [, domain]);We can call the DeleteCookie() function from the Cookie Library using the following syntax: DeleteCookie(name, [, path] [, domain]);

Copyright ©2005  Department of Computer & Information Science Open the file called usingCookies_03.html

Copyright ©2005  Department of Computer & Information Science Modifying a Cookie We can call the SetCookie() function from the Cookie Library to modify a cookie, essentially overwriting the previous cookie.We can call the SetCookie() function from the Cookie Library to modify a cookie, essentially overwriting the previous cookie.

Copyright ©2005  Department of Computer & Information Science Open the file called usingCookies_04.html

Copyright ©2005  Department of Computer & Information Science Summary Session cookies are available to a browser so long as a browser session is active; once the browser closes, it loses all session cookies.Session cookies are available to a browser so long as a browser session is active; once the browser closes, it loses all session cookies. Browsers save persistent cookies to a user’s hard drive; the values of persistent cookies are available across multiple browser sessions.Browsers save persistent cookies to a user’s hard drive; the values of persistent cookies are available across multiple browser sessions. continued …

Copyright ©2005  Department of Computer & Information Science Summary Cookies consist of a name, value, expiration date, path, domain and secure flag.Cookies consist of a name, value, expiration date, path, domain and secure flag. Browsers store cookie modification dates in milliseconds, from 01/01/1970.Browsers store cookie modification dates in milliseconds, from 01/01/1970. continued …

Copyright ©2005  Department of Computer & Information Science Summary We can use the SetCookie() function from the open-source Cookie Library to set or modify a cookie.We can use the SetCookie() function from the open-source Cookie Library to set or modify a cookie. We can use the GetCookie() function from the open-source Cookie Library to retrieve an existing cookie’s value.We can use the GetCookie() function from the open-source Cookie Library to retrieve an existing cookie’s value. We can use the DeleteCookie() function from the open-source Cookie Library to delete a cookie.We can use the DeleteCookie() function from the open-source Cookie Library to delete a cookie.

Copyright ©2005  Department of Computer & Information Science Resources Spain-McDuffie, Tina. JavaScript Concepts & Techniques: Programming Interactive Web Sites. Wilsonville, OR: Franklin, Beedle & Associates, 2003.Spain-McDuffie, Tina. JavaScript Concepts & Techniques: Programming Interactive Web Sites. Wilsonville, OR: Franklin, Beedle & Associates, 2003.