Cookies

Since HTTP is a stateless protocol, preserving state ("persistent data") is one of the challenges faced by web developers. Techniques:

• Server-side client recognition and data storage
• Hidden fields
• Cookies

A cookie is:

• A small piece of information
• Stored by the web browser on the client machine
• Conceptually, like a user profile
• Originally invented by Netscape in 1995, amid some controversy
• In a file named cookies.txt (Typical Netscape path: c:\program files\netscape\users\username\cookies.txt)

Cookie properties and restrictions:

• visible only to the server that created it
• a name
• a text string
  • in Netscape Navigator, up to 4000 characters
• an expiration date (optional)
  • if none is set, the cookie is not saved when the browser is terminated
• Netscape Navigator will store no more than 300 cookies
  • no more than 20 cookies for a single domain

A Typical Cookie

Here's a line from cookies.txt:

www.keller.com FALSE /javascript/chap14 FALSE 909700248 FavWine chablis

The fields are tab-delimited. They include:

• Domain of server that created the cookie
• Whether access to the cookie requires a secure HTTP connection
• Pathname of URL(s) capable of accessing the cookie -- by default, all documents in the same directory as the document that created it have read and write access to the cookie
• Expiration date of the cookie (seconds since 1970)
• Name of the cookie
• String data

Javascript programmers don't create these lines explicitly.

• Rather, they invoke methods on the cookie property of the document object.
• These methods tell the browser to store and retrieve cookies.

Storing a Cookie

Here's an example. It stores a cookie value that expires in one day. Here's the source code. Observe:

• the loop through the radio buttons
  • makes it easy to add more
• the document.cookie property
  • a string representing all the cookies associated with a document
• semicolons delimit the name=value pairs for fields when a cookie is being stored
  • there are two fields in the example: the cookie's name/value, and its expiration date
• the expires property, given an expiration date, formatted as:

  Wdy, DD-Mon-YY HH:MM:SS GMT
  (platform-dependent)

Though it's stored in cookies.txt in seconds, the expires property must be assigned as in GMT format.

• the escape() function
  • URL-encodes a string (punctuation and special characters are not allowed here)
• the toGMTString() method of the Date object

Retrieving a Cookie

document.cookie is just a string.

• The Javascript programmer must parse it.
• Below is code that does this. It uses:
  • the indexOf() method
  • the substring() method
  • the unescape() method to un-URL-encode (URL-decode?) the cookie text string
• The parameter passed to our getCookie function below is the name of the sought cookie.
• The function returns the string that is the value of the sought cookie.

  function getCookie(Name) {
      var search = Name + "="
      if (document.cookie.length > 0) { 
          offset = document.cookie.indexOf(search) 
          if (offset != -1) {
              offset += search.length 
              end = document.cookie.indexOf(";", offset) 
              if (end == -1) 
                  end = document.cookie.length
              return unescape(document.cookie.substring(offset, end))
          } 
      }
      return ""
  }

Lab

Your tasks:

1. Find your cookies.txt file.
   • Don't edit this file. Just look at it.
   • In it, find the cookie stored by the example program.
   • You may need to close all your browser windows first.
2. Microsoft Internet Explorer doesn't store cookies in a file named cookies.txt. Where does it store them?
3. Write a web page containing Javascript that retrieves the cookie (named FavoriteWine) stored by the example program.
   • Parse the cookie string.
   • Most of your code can be cut and pasted from getCookie() above.
   • Remind the user which is their favorite wine.
   • One way to add this Javascript-generated text to the web page is with the document.write() method. Example:

     <script type="text/javascript">
       document.write(expr1, ...,exprN)
     </script>

     Place this code anywhere in the body of your document. The expressions can be Javascript variables (e.g. from getCookie()) containing text. This text will then replace this code in the body of your document.

   • Remember that you can read only cookies that were written by your own machine. Therefore, you must make a copy of the cookie-writing web page and run it on your own machine in order to write a cookie that your cookie-reader can read.

Solution

Don't peek unless you're stuck!

• Run it.
• Source code.