16.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.^[1] 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 in 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 CGI 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 CGI scripts on the server can read and write cookie values that are stored on the client. As we'll see, JavaScript can also manipulate cookies using the cookie property of the Document object.

^[1] 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 serve to 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.

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 a cookie by setting the value of the cookie property. 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 four optional attributes that control its lifetime, visibility, and security. The first attribute is expires, which specifies the cookie's lifetime. 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 use its expires attribute to specify an expiration date -- this attribute causes the browser to save the cookie in a local file so that it can read it back in the next time the user visits the web page. Once the expiration date has passed, the cookie is automatically deleted from the cookie file.

The second attribute of a cookie 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.acme.com/catalog/index.html creates a cookie, for example, that cookie is also visible to http://www.acme.com/catalog/order.html and http://www.acme.com/catalog/widgets/index.html, but it is not visible to http://www.acme.com/about.html.

This default visibility behavior is often exactly what you want. Sometimes, though, you'll want to use cookie values throughout a multipage 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 cookies. For example, if a cookie set by http://www.acme.com/catalog/widgets/index.html has its path set to "/catalog", that cookie is also visible to http://www.acme.com/catalog/order.html. Or, if the path is set to "/", the cookie is visible to any page on the www.acme.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.acme.com may need to read cookie values set from catalog.acme.com. This is where the third cookie attribute, domain, comes in. If a cookie created by a page on catalog.acme.com sets its path attribute to "/" and its domain attribute to ".acme.com", that cookie is available to all web pages on catalog.acme.com, orders.acme.com, and any other server in the acme.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 fourth and 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, path, domain, and secure attributes of a cookie are not Java-Script object properties. We'll see later in the chapter how you set these cookie atributes.

If you are interested in the complete technical details of how cookies work, see http://www.netscape.com/newsref/std/cookie_spec.html. This document is the original specification for HTTP cookies; it contains low-level details that are more suitable to CGI programming than to JavaScript programming. The following sections 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.