Credit: Mulchaey et al (ST Sci/UMD/NASA)

Cookies in JavaScript

• They are to be used for relatively small amounts of information

• The number of cookies is very limited, so you should use as few as possible. One way to do this is to compact many values into a single cookie, e.g., if you have name-value pairs you might store then as "name1:value&name2:value&name3:value" where, say, ":" and "&" are used as separators

• The full syntax of a cookie is:
  [cookie-name]=[cookie-values-list]; expires=[date]
  ; secure; path=[path]; domain=[domain]
  where
  • [cookie-name] is the name you give to the cookie

  • [cookie-values-list] is a compacted list of values

  • [date] is the GMT date in standard form

  • "secure" means that its access is restricted, so only those HTML pages accessed through HTTPS or similar protocols can access these cookies

  • [path] and [domain] control which web pages can access a cookie. By default, any Web page in the same directory, or any directory below it, can access a cookie created by that page, but not in any directory above it. However, the [path] variable lets you "go up the chain" to just below the level of the domain. Consider the following set of addresses:

    (1) http://www.X.com/A/B/C/d.html
    (2) http://www.X.com/A/B/C/D/E/F/g.html
    (3) http://www.X.com/A/B/H/i.html
    (4) http://XYZ.X.com/J/K/L/m.html
    

    If page "d.html" sets a cookie, then by default, page "g.html" can access it, as can any web pages in directory /C or its subdirectories, but neither web page "i.html" nor "m.html" can access that cookie. But if, in "d.html", you set the [path] to http://www.X.com/A/B, then "i.html" can access it. And if you set the [domain] to "X.com" and the [path] to "/" then "m.html" can access it

Note that the characters '=' and ';' are reserved and normally should not be used. Also note that blank spaces in cookies come out looking like '%20', and so you might not want to use them to avoid some confusion. There is a pair of functions in JavaScript named "escape()" and "unescape()" that let you encode troublesome characters in cookies if you need to do so, and some of our examples will demonstrate its use, where others use underscores in place of blanks and avoid "=' and ';'.

We illustrate cookies with three examples: the first is a very small program that creates, displays, destroys, and lists cookies and their values. Here is the example .

The second example is a "near-practical" program which keeps track of the money balance for a number of customers based on their purchases and payments. Pay special attention to the string manipulation routines which extract and compact cookie values. Here is the example .

The third example shows how you can trace the movements of a user as they navigate your web pages. This is sometimes used to determine if a web page is confusing: if a person mouses back and forth over elements many times, it may indicate that the layout and wording need to be clarified. This example also illustrates

• how you can maintain continuity across multiple web pages
• how you can track user-interactions with different HTML elements
• how you can interface cookie information with Perl CGI scripts which run on the server.

Course Topics

Major Concepts in JavaScript

Execution of JavaScript Programs

JavaScript Statements and Structures

JavaScript as an Object Oriented Language

The Document Object Model

Programming with JavaScript

JavaScript and DHTML

Using Cookies in JavaScript

Using JavaScript to Write HTML