1. IS2802 Introduction to Multimedia Applications for Business Lecture 8: JavaScript and Cookies Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

2. Lecture Outline What are cookies? Why use cookies? Attributes of a cookie JavaScript and Cookies Exercise

3. What are cookies? Cookies are small bits of information stored on the client’s computer for a specified length of time (less than 4 Kilobytes)  They are pieces of text, usually containing strings and numeric values  By default the cookie will remove itself when the browser shuts down These pieces of information can be retrieved only by the site that set them (The browser tracks this).  they are accessed through the document object’s cookie property

4. Why Use cookies? Cookies May be useful for  Recognising frequent users  Remembering passwords (requires encryption)  User Profiling Which pages are viewed? How does movement around the site occur? Which advertisements are relevant (DoubleClick)  User preferences E.g. backgrounds, image sprites, colour schemes, etc  Shopping carts

5. Attributes of a Cookie A cookie is like a JavaScript variable, with a name and a value.  However, because cookies can arrive at a browser from any web site in the world and need to be kept separate, the existence of a cookie depends on several other attributes as well

6. Cookie Attributes  Name: a cookie name is a string of alphanumeric characters Cookie names are not case-sensitive but may never have spaces or commas (though may include underscores)  Value: The data that is to be saved No undefined/null values for cookies, but length may = zero  Expires: When the cookie expires (default is endo of session) The format of this date is DD-Mon-YY HH:MM:SS UTC

7. Cookie Attributes  Path: Restricts cookie to specific level of a site (defaults to level where the cookies was created )  Domain: Site specification to restrict access to cookies (defaults to current domain)  Secure: When set to 'true', the cookie responds only to a 'secure' server (defaults to 'false‘)

8. JavaScript and Cookies To make use of cookies you must know how to:  1. Set the cookie  2. Retrieve (Read) the cookie The following functions will encode and decode your properties:  they are escape() Used to encode the cookie when setting it  and unescape() Used to decode the cookie when reading it

9. JavaScript Cookies Example Save the following into a new page called cookiePage1.html Cookie1 function setCookie() { var name = "Name: " + document.getElementById("user").value; document.cookie = escape(name); document.getElementById("user").value = ""; } Page for Setting the Cookie Enter name: Then click here to see an example of the cookie being read

10. JavaScript Cookies Example … and save the following into a new page called cookiePage2.html Read Cookie1 function readCookie() { var cookie1 = unescape(document.cookie); cookie1 = cookie1.split(":"); var name = cookie1[1]; alert("Your name is: " + name); } Example of reading a Cookie Click here to read the cookie Back to Page 1

11. JavaScript and Cookies Simplified setting of cookies  Create a variable to store the string you want your cookie to contain, e.g. var name = "Cookie_name";  Add some form of delimiter to your string, which can be used to separate the cookie, so that you only retrieve the parts you want later on, e.g. name = name + ":";  Set the cookie to the escaped value of that string, e.g. document.cookie = escape(name);

12. JavaScript and Cookies Simplified reading of cookies  Assign a variable to the unescaped value of the cookie var name2 = unescape(document.cookie);  Split the variable according to the delimiter you added earlier (using the split() function built into all string objects) name2 = name2.split(":");  This variable will now be an array comprised of individual strings for each value separated by the delimeter (i.e. ‘:’)

13. Viewing Cookies on Your PC To access cookie options in your browser In IE Tools  Internet Options  Browsing History  Settings  View Objects or View Files In Firefox Tools  Options  Privacy In Safari, Safari  Preferences  Security In Chrome Tools  Options  Under the Hood  Security  Cookie settings In Windows, you also simply go Start  Run  Cookies

14. Exercise Add a function to cookiePage1 called clearCookie() which sets the cookie to “”, and add a ‘Clear name’ button to the body of CookiePage1 which calls this function Add JavaScript in the body of the Webpage after the Page for Setting the Cookie heading which does the following  Checks to see if the cookie is empty  If the cookie is not empty, it adds HTML with the words ‘Hi there ‘ and then the name of the user from the cookie Hint: you can use some of the code in the readCookie() function on cookiePage2.html for this

15. Exercise The line window.location.reload(); forces a page reload. What will happen if we try to put this in the body? What two places in this example should we put this line? At the moment there is no safety precautions against someone entering a blank name – it may even overwrite a saved name if someone clicks that button by accident. How would we guard against that? How could we adjust our code so that, once someone has saved a name, the prompt, textfield, and button to save name disappear?

16. References and Further Reading http://www.computer-security.com/Cookies/cookview.htm http://home.cogeco.ca/~ve3ll/jstutord.htm http://www.quirksmode.org/js/cookies.html