how to get to user preferences in website using JavaScript

1. JavaScript code for setting cookies

First we have some generic code that will set a cookie with a given name and value. In this example we’ve set the expiry date (when the cookie will be removed from your browser) to 30 days and all cookies will be set with a path value of ‘/’ (the root level of the website):

var today = new Date();
  var expiry = new Date(today.getTime() + 30 * 86400 * 1000); // plus 30 days

  function setCookie(name, value)
  {
    document.cookie = name + "=" + escape(value) + "; expires=" + expiry.toGMTString() + "; path=/";
  }

Then comes the form handler function which is also quite simple. We first populate an associative array, prefs, with the selected name-value pairs and then loop through that array setting a cookie for each value:

 var prefs = new Array();

  function setPrefs(form)
  {
    prefs['fontfamily'] = form.fontfamily.options[form.fontfamily.selectedIndex].value;
    prefs['overflow'] = form.overflow.options[form.overflow .selectedIndex].value;
    for(var x in prefs) setCookie(x, prefs[x]);
    return true;
  }

A better approach is to use a single cookie to hold all the values rather then one for each. The reason for this is that browsers will only hold a certain number of cookies from a domain before they start deleting the oldest. 

2. PHP code for reading cookies

In the PHP code that displays the template for this website we add the following code to the HEAD of the HTML page (inside the STYLE tags).

First for the font famliy:

  if(isset($_COOKIE['fontfamily']) && $_COOKIE['fontfamily']) {
    echo "  body { font-family: \"{$_COOKIE['fontfamily']}\"; }\n";
  }

and for the display setting:

  if(isset($_COOKIE['overflow']) && $_COOKIE['overflow']) {
    echo "  #content { max-height: {$_COOKIE['overflow']}px; overflow: auto; }\n";
  }

and so on for other values. You can see the extra CSS properties in the HEAD of each page by viewing the HTML source.

Because the cookies are set with a path of ‘/’ they apply to all pages in this domain. And because we use a single template for every page the preferences you select will apply to the entire site.

The advantage of using JavaScript to set the cookies is that they’re recognised by the browser immediately. If we submitted the form and used PHP to set the cookies then they wouldn’t appear immediately in the $_COOKIE array as the browser hasn’t yet told the server that it has them yet. That would happen on the next request.

To get around this you have to do something like the following:

<?PHP
  if(isset($_POST['fontfamily'])) {
    setcookie('fontfamily', $_POST['fontfamily'], time() + 30 * 86400, '/');
    $_COOKIE['fontfamily'] = $_POST['fontfamily']);
  }
?>

The first command tells the browser to set the cookie, and the second adds it to the $_COOKIE array so our script (above) can see the value right away.