JavaScript: Using cookies to set Preferences
The form below lets you set 'preferences' that apply to the rendering of this website. Each preference is stored as a 'cookie' in your browser and read by the server when a page is requested. We're cheating a little bit by using PHP instead of JavaScript to read the cookies but the same result is possible - if more involved - using JavaScript instead.
Current cookie name/value pairs in your browser:
| PHPSESSID | 5lith1ksgd87phtjjsq70t9mp4 |
|---|---|
| fikker-61vm-nk2N | MgPGRI6oXLV7DSLWJk4y6wNi63F1ZE0E |
It's normal if a number of Google-related cookies already appear.
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. They will also only hold a certain number of cookies in total. More on that later...
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.
References
Related Articles - Cookies
- JavaScript Saving Form Values using Cookies
- JavaScript Retrieving values from Cookies
- JavaScript Using cookies to set Preferences
- PHP Saving a list of values in a cookie