Style Switcher

Using CSS and Javascript

Change Page Appearance

Using Cookies to Store Styles

Now that the style has been set we need a way to store it. If we move from the originating page to another page within the site the browser will go back to the default style unless something tells it otherwise. One way to maintain the alternate style is through the use of a cookie. Cookies are stored in a text file on the users computer. Cookies allow for personalization of otherwise state-less webpages.

Cookies typically consist of the following elements:

  1. A name-value pair. You can search for the name to read out a cookie and obtain the value.
  2. Expiary date. This is when (UTC) the cookie will be trashed. If no expiary date is specified the cookie will be trashed when the browser is closed.
  3. Domain and path. The domain is set to the domain that sent the cookie by default. If you would like a cookie to read by multiple subdomains then you must specify the domain. For example, if www.example.com is setting a cookie but you want subdomain.example.com to also have access to the cookie you should set the domain to example.com rather than letting it default to www.example.com. The path is where the cookie is active. The path can be set to / if you want the cookie to be valid throughout the entire domain.

The following is what Slashdot.org stores in my browser's cookies.txt file after I log into their site:

slashdot.org	/	FALSE	1109994986	user	574948::WLAwBNp2zlyW4QwDa6nP7V

The name is "user" and the value is "574948::WLAwBNp2zlyW4QwDa6nP7V" (574948 is my Slashdot user number and WLAwBNp2zlyW4QwDa6nP7V is probably my encrypted password). The "1109994986" represents the expiary date. "slashdot.org" is the domain and "/" is the path. The "FALSE" is a security flag indicating that it is OK to transmit this cookie unencrypted over the internet. When I request a page at slashdot.org the information from this cookie is added to the HTTP header.

Most modern browsers allow you to manage cookies to varying degrees. The following image is Mozilla Firefox's cookie manager.

The information stored in cookies can be read by Javascripts or server-side programs. Cookies can be accessed with the document.cookie property. In our example we need to store the style preference in a cookie. To do this we first create a javascript function named createCookie in our stylestorage.js file. This function will be called everytime a visitor leaves a page on our site using window.onunload.

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

createcookie is passed the name "style," the name of the chosen stylesheet for the value, and 365 for the number of days the cookie should last. This allows our other function, readCookie, to search for "style" in order to find which stylesheet should be used. createCookie also adds 365 days to the current date and sets the sum as the expiary date.

The readCookie function is called when a page is loaded using window.onload. readCookie parses the name value pair and returns the cookie's value.

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

Once this value is known it is passed to the setActiveStyleSheet function located in styleswitcher.js. From there styleswitcher.js lets the browser know what style sheet the user wants applied to the web page.

Valid XHTML 1.0!