getSpecificReminder(num, monthName)

function getSpecificReminder(num, monthName) {
  var prefix = "^" + num + "^"
  var totalCookie = getCookie(monthName + "Calendar")
  var startIndex = totalCookie.indexOf(prefix, 0)
  var startData = totalCookie.indexOf("^", startIndex + 1) + 1
  if (num == 31)
var endData = totalCookie.length
  else
var endData = totalCookie.indexOf("^", startData)

  return totalCookie.substring(startData, endData)
}

This function retrieves the specific reminder of the month from the cookie. It first builds the “search key” in prefix. It is built of a “^” followed by the day number of the month and then yet another “^”. After getting the cookie and reading the string into totalCookie string object, the function searches for the position of the relevant reminder, according to prefix “search key,” yielding the startIndex position. Looking for the next “^” skips over the number of the day itself and leaps onto the string index of the reminder’s first character, startData. The last character of the reminder is found via a search for the next “^” character or by reaching the end of the cookie. Once the startData and endData are known, the substring between these two indices is returned. Note that because the indexing relies on “^” characters, that character should not be provided by the user in a reminder text.

setSpecificReminder(num, monthName, newValue)

function setSpecificReminder(num, monthName, newValue) {
  var prefix = "^" + num + "^"
  var totalCookie = getCookie(monthName + "Calendar")
  var startIndex = totalCookie.indexOf(prefix, 0)
  var startData = totalCookie.indexOf("^", startIndex + 1) + 1
if (num == 31)
var endData = totalCookie.length
  else
var endData = totalCookie.indexOf("^", startData)
  var now = new Date()
  fixDate(now)

  // set time to one month (31 days) in the future
  now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 31)

  setCookie(monthName + "Calendar", totalCookie.substring(0,
 startData) + newValue + totalCookie.substring
 (endData, totalCookie.length), now)
}

As in setSpecificReminder(), the first section determines the indices of the first and last character of the relevant reminder (startData and endData, respectively). An instance of the Date object is then created and fixed for Mac computers. The expiration date is then computed to one month in the future. The last statement of the function sets the cookie. The first parameter is the name of the cookie, while the second one is the reminder string, composed of the substring before the new reminder (all previous days are not modified), the newValue of the current day, and the rest of the old string (all following days are not modified as well). The expiration date is handed to the function as the last argument.

Outliner

As you have seen in this chapter, you can use JavaScript to store data in the form of client-side cookies. The outliner is another example for using cookies. It is an exploding/collapsing structure used to store an index or table of contents. The user can expand (explode) or collapse items in the outline. Outliners were very popular in Windows 3.1x and are also present in many applications. An outliner written in JavaScript enables the user to take advantage of the structure for convenient navigation among many Web pages and anchors. The main topics of a Web site are the topmost items in the outline, while the more detailed items are usually deeply nested. It is very difficult to explain exactly what an outliner is, so stick with the saying “A picture is worth a thousand words.”

Figure 24-3.  A fully exploded expanded) outline.

Figure 24-3 illustrates a fully expanded outline. When the user clicks the downwards triangle to the left of “software,” the icon becomes a triangle facing right. The “Netscape” and “Microsoft” items then disappear, because their parent was collapsed. The basic idea should be clear. You can toggle a single item (only if it is a parent) between two different states (either expanded or collapsed).