setStorage()

function setStorage() {
 // initialize local variable to empty string
 var text = ""

 // loop through all properties of outline "array"
 for (var i = 0; i < outline.length; ++i) {
   // use "1" character to represent true state, and "0" for
 false state
   text += (outline[i].state) ? "1" : "0"
 }

 // create cookie named "outline" with "binary" string
 setCookie("outline", text)
}

The setStorage() function creates a string with binary characters (0s and 1s). The first character of the string is associated with the first element of the outline array, and so forth. The character “0” indicates that the value of the item’s state property is false, and a “1” character means that the item’s state property is true. The last statement of this function sets the cookie via the setCookie() function, using “outline” as the name and the accumulative string as the value. No path or expiration date is specified, so the cookie is specific to the creating page and expires at the end of the user’s current session.

Global Statements

The only global statement in the first script is the one invoking the makeDatabase() function. The second script, on the other hand, consists of global statements only and is responsible for printing the outline-style table of contents. The <PRE>…</PRE> tags are important because they enable us to use regular spaces for indentation.

The most important statement in the second script is the loop itself, which iterates through all elements of the global outline array (created by the makeDatabase() function in the first script). Each indentation level consists of three spaces and can be configured to any other integer for customized indentation. The topmost level items are not indented at all (0 * 3 = 0), the second level is indented by 3 spaces (1 * 3 = 3), the third level by 6 spaces (2 * 3 = 6), and so on. Note that an item is only printed if the value of its state property is true (by definition, if it is false, its parent is collapsed so you are not supposed to see the item). Each printed item consists of its small image (outline[i].pic), followed by one space and its text (outline[I].text). A new line (<BR>) is appended to each item. When an element whose state property is false is encountered, i is incremented the desired amount of times, until its index is that of the next item at its level or a higher one. It passes over all items at lower levels because they do not appear.

Summary

In this chapter you have learned the fundamentals and usage of cookies, one of the most powerful features of JavaScript. It enables the programmer of a Web page to store information in one session and retrieve it later in another one. We have provided three important functions by which you can get a cookie, set a cookie, and delete a cookie. All operations, as well as storage, are handled on the client side. Cookies are transparent to the server. The client imposes two limitations on cookies: maximum 20 cookies per server or domain, 4KB each. We have shown several scripts in this chapter: one that uses cookies to remember the number of visits to a Web site, one that uses cookies to store the user name, and one which uses cookies to remember a user’s reminder for every day of the month. We also included an advanced collapsing/expanding outline-style table of contents which uses cookies as well.