Section 19.1. An Overview of Cookies

19.1. An Overview of Cookies

A cookie is a small amount of named data stored by the web browser and associated with a particular web page or web site.^[*] Cookies serve to give the web browser a memory so that scripts and server-side programs can use data that was input on one page on another page, or so the browser can recall user preferences or other state variables when the user leaves a page and then returns. Cookies were originally designed for server-side programming, and at the lowest level, they are implemented as an extension to the HTTP protocol. Cookie data is automatically transmitted between the web browser and web server, so server-side scripts can read and write cookie values that are stored on the client. As you'll see, JavaScript can also manipulate cookies using the cookie property of the Document object.

^[*] The name "cookie" does not have a lot of significance, but it is not used without precedent. In the obscure annals of computing history, the term "cookie" or "magic cookie" has been used to refer to a small chunk of data, particularly a chunk of privileged or secret data, akin to a password, that proves identity or permits access. In JavaScript, cookies are used to save state and can establish a kind of identity for a web browser. Cookies in JavaScript do not use any kind of cryptography, however, and are not secure in any way (although transmitting them across an encrypted https: connection helps).

cookie is a string property that allows you to read, create, modify, and delete the cookie or cookies that apply to the current web page. Although cookie appears at first to be a normal read/write string property, its behavior is actually more complex. When you read the value of cookie, you get a string that contains the names and values of all the cookies that apply to the document. You create, modify, or delete an individual cookie by setting the value of the cookie property using a special syntax. Later sections of this chapter explain in detail how this works. To use the cookie property effectively, however, you need to know more about cookies and how they work.

In addition to a name and a value, each cookie has optional attributes that control its lifetime, visibility, and security. Cookies are transient by default; the values they store last for the duration of the web-browser session but are lost when the user exits the browser. If you want a cookie to last beyond a single browsing session, you must tell the browser how long you would like it to retain the cookie. The original way to do this was by setting the expires attribute to an expiration date in the future. While the expires attribute still works, it has been superseded by the max-age attribute, which specifies the lifetime, in seconds, of the cookie. Setting either of these attributes causes the browser to save the cookie in a local file so that it can read it back in during future browsing sessions if the user revisits the web page. Once the expiration date has passed, or the max-age lifetime has been exceeded, the browser automatically deletes the cookie from its cookie file.

Another important cookie attribute is path, which specifies the web pages with which a cookie is associated. By default, a cookie is associated with, and accessible to, the web page that created it and any other web pages in the same directory or any subdirectories of that directory. If the web page http://www.example.com/catalog/index.html creates a cookie, for example, that cookie is also visible to http://www.example.com/catalog/order.html and http://www.example.com/catalog/widgets/index.html, but it is not visible to http://www.example.com/about.html.

This default visibility behavior is often exactly what you want. Sometimes, though, you'll want to use cookie values throughout a web site, regardless of which page creates the cookie. For instance, if the user enters his mailing address in a form on one page, you may want to save that address to use as the default the next time he returns to the page and also as the default in an entirely unrelated form on another page where he is asked to enter a billing address. To allow this usage, you specify a path for the cookie. Then, any web page from the same web server that contains that path in its URL can share the cookie. For example, if a cookie set by http://www.example.com/catalog/widgets/index.html has its path set to "/catalog", that cookie is also visible to http://www.example.com/catalog/order.html. Or, if the path is set to "/", the cookie is visible to any page on the www.example.com web server.

By default, cookies are accessible only to pages on the same web server from which they were set. Large web sites may want cookies to be shared across multiple web servers, however. For example, the server at order.example.com may need to read cookie values set from catalog.example.com. This is where the next cookie attribute, domain, comes in. If a cookie created by a page on catalog.example.com sets its path attribute to "/" and its domain attribute to ".example.com", that cookie is available to all web pages on catalog.example.com, orders.example.com, and any other server in the example.com domain. If the domain attribute is not set for a cookie, the default is the hostname of the web server that serves the page. Note that you cannot set the domain of a cookie to a domain other than the domain of your server.

The final cookie attribute is a boolean attribute named secure that specifies how cookie values are transmitted over the network. By default, cookies are insecure, which means that they are transmitted over a normal, insecure HTTP connection. If a cookie is marked secure, however, it is transmitted only when the browser and server are connected via HTTPS or another secure protocol.

Note that the expires, max-age, path, domain, and secure attributes of a cookie are not JavaScript object properties. Later in the chapter, you'll see how to set these cookie attributes.

Cookies have gotten a bad reputation for many web users because of the unscrupulous use of third-party cookiescookies associated with the images on a web page rather than the web page itself. Third-party cookies enable an ad-hosting company to track a user from one client site to another client site, for example, and the privacy implications of this practice cause some users to disable cookies in their web browsers. Before using cookies in your JavaScript code, you may want to first check that they are enabled. In most browsers, you can do this by checking the navigator.cookieEnabled property. If true, cookies are enabled, and if false, cookies are disabled (although nonpersistent cookies that last for only the current browsing session may still be enabled). This is not a standard property, and if you find that it is undefined in the browser your code is running in, you must test for cookie support by trying to write, read, and delete a test cookie. I'll explain how to do these things later in the chapter, and Example 19-2 includes code for testing for cookie support.

If you are interested in the complete technical details of how cookies work (at the HTTP protocol level), see RFC 2965 at http://www.ietf.org/rfc/rfc2965.txt. Cookies were originally created by Netscape, and Netscape's original cookie specification is still of interest. Although parts of it are now obsolete, it is much shorter and easier to read than the formal RFC. Find this old document at http://wp.netscape.com/newsref/std/cookie_spec.html.

The sections that follow discuss how you can set and query cookie values in JavaScript and how you can specify the expires, path, domain, and secure attributes of a cookie. These are followed by a section on cookie alternatives.