10.4 Passing Data Between Pages Via Cookies
NN 2, IE 3
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:
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:
You can embed both event handlers and functions into all related pages to keep the data moving through all page visits.
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.
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.