Cookies and JavaScript References Appendix I in your book and Chapter 12 of JavaScriptWorld
Did you ever wonder? Did you ever wonder how a web site such as Yahoo! or Amazon.com remembers who you are and when you last logged in? These web sites leave a cookie in your computer.
What’s a Cookie? A piece of information that the browser stores in a text file in the user’s computer. A cookie identifies your computer to a web server A cookie can contain user info for their next visit to a web site Your username and when you last logged into Yahoo! Always includes the name of the server.
Where are your Cookies? Internet Explorer stores cookies in separate text files in a cookies folder, i.e. C:\Documents and Settings\User\Cookies\ Netscape and Mozilla store cookies in a single text file named cookie.txt. This is located deep in the file hierarchy in a location such as C:\Documents and Settings\User\ Application Data\Mozilla\Profiles\...\cookie.txt These examples apply to Win2000. In other Operating Systems, these locations will be different.
Netscape’s Cookie Manager Netscape has a nice Cookie Manager. See Netscape menu Tools > Cookie Manager You can use it to view and/or remove cookies, or to refuse cookies from certain sites.
Misconceptions - What cookies can’t do Cookies are text files, not programs Can’t read your hard disc Can’t transmit viruses
Storing multiple values The format is Document.cookie=“fieldname1=fieldvalue1; fieldname2=fieldvalue2; …” Total Cookie size <4K Max 300 cookies.
Typical Fields Name = text Expires = date Path = text Domain =text The Name parameter cannot contain spaces, commas or semicolons. The text contains the string stored. Expires = date expiration date (GMT). Expired cookies get deleted by the browser. If omitted, the cookie expires when the browser is closed. Path = text Indicates the path to which the cookie applies. “/” indicates the cookie can be accessed from any folder within the web site. Domain =text URL of web site storing the cookie Secure Indicates the data should be encrypted using a secure connection
JavaScript In JavaScript, you can refer to a cookie using document.cookie This is a string variable You can set this value or get it. document.cookie = str // set str = document.cookie // get You can use the split method with a delimiting string to split the cookie string can be split into an array of sub-strings.
Cookies and JavaScript JavaScript supplies a built-in object called document.cookie to handle cookie interaction. This object will store all the valid cookies for the given page the script is running on. When you insert a value into document.cookie, a cookie will be created. The syntax is identical to that of the HTTP header: document.cookie="foo=bar; path=/; expires=Mon, 01-Jan-2001 00:00:00 GMT";
4.2 Creating cookies with JavaScript This function requires that a name and a value are passed, with all other parameters optional. function setCookie (name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); } Usage: setCookie("foo", "bar", "Mon, 01-Jan-2001 00:00:00 GMT", "/");
5.2 Retrieving cookies with JavaScript To retrieve cookies with JavaScript, use document.cookie again. Typically, document.cookie has a string like so: foo=bar;this=that;somename=somevalue;..... This string contains every name-value pair valid for this document, separated by semicolons. This can make searching for your needed value a bit of a pain. The getCookie() function does make this simpler: function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return(setStr); } Usage: myVar = GetCookie("foo"); Here, myVar would equal bar.