JavaScript and DHTML Cookbook-JavaScript and DHTML Cookbook

10.4 Passing Data Between Pages Via Cookies

NN 2, IE 3

10.4.1 Problem

You want to move user-influenced data from one of your pages to another without server intervention using browser cookies.

10.4.2 Solution

Using the cookies.js library from Recipe 1.9, you can use the onunload event handler of one page to store from one to twenty name/value pairs on the user's machine. The following example captures a text input field's value and saves it to a cookie that stays on the visitor's computer for 180 days:

<script language="JavaScript" type="text/javascript" src="cookies.js"></script>
<script language="JavaScript" type="text/javascript" >
function saveData( ) {
    var data = document.forms[0].userName.value;
    var expDate = getExpDate(180, 0, 0);
    setCookie("userName", data, expDate); 
}
</script>
...
<body onunload="saveData( )">

In the second document, an onload event handler retrieves the cookie data and assigns the value to a text input field with the same name located on the second page:

<script language="JavaScript" type="text/javascript" src="cookies.js"></script>
<script language="JavaScript" type="text/javascript" >
function readData( ) {
    var data = getCookie("userName");
    document.forms[0].userName.value = data; 
}
</script>
...
<body onload="readData( )">

You can embed both event handlers and functions into all related pages to keep the data moving through all page visits.

10.4.3 Discussion

Unlike the other client-side persistence techniques described in this chapter, only the cookie approach preserves the data on the user's computer even after the user visits other sites and, if you assign an expiration date in the future, turns off the computer. If you don't specify an expiration date, the cookie remains in place only until the user quits the browser.

Cookie data may contain only strings. Therefore, if you wish to preserve information that your scripts have accumulated into arrays or custom objects, you must convert those items to strings (Recipe 3.3 and Recipe 3.13) before they may be saved as cookies. Upon reading the values, you may then recreate the arrays or objects from the string values.

To move all the data from a form containing multiple elements (and different types of elements) requires extracting the form control values individually. You can perform this task manually, assigning each control's value to a separate name/value pair for each cookie. Or you can use a utility script (Recipe 8.14) that systematically extracts all malleable form controls names and values and combines them into a single string; a companion function extracts the data and repopulates an identical form in another page.

Carrying over data via cookies is an efficient procedure that is completely invisible to most users. They won't even know you're reading and writing cookies on their computers. But users can also modify the default behavior of cookies in their browsers, which can disrupt or ruin the silent data passage from page to page. For instance, users may set their browsers to alert them whenever a cookie is accessed. With cookie usage so high across the Web these days, there are not too many users likely have this annoying preference style in place. More common is the user who has turned off cookies entirely. Some organizations install browsers for their employees with cookies turned off by default. Use cookie detection (Recipe 5.9) to assure that your scripts can use cookies for passing data.

Bear in mind that there are physical limits to cookie data, particularly in earlier browsers. Each server and domain is limited to 20 name/value pairs. If you need to store the equivalent of more than 20 entries, you must devise a data structure that can be represented in string form. For example, you could create a custom object with 25 properties, and then use Recipe 3.13 as a model to convert that object to a string for storage in a single name/value pair cookie. Another limitation comes into play when storing a lot of data. The total storage space available per server and domain is 4,000 characters, and the safe range per name/value pair is less than 2,000 characters. When calculating data length, take into account that values go through the escape( ) function, which expands some characters to a total of three characters (e.g., a space becomes %20).

10.4.4 See Also

Recipe 1.9 for cookie utilities; Recipe 3.3 for array and string conversions; Recipe 3.13 for converting custom objects to strings; Recipe 5.9 for detecting whether cookies are enabled; Recipe 8.14 for extracting all form control data for passage as string data.

[ Team LiB ]