AJAX - The Complete Reference

530 Part III: Advanced Topics

The first and most obvious solution to the persistence challenge are cookies that are

easily accessible using JavaScript’s document.cookie property. While cookies are generally

limited to about 4K, we could concatenate data across cookies to provide as much storage as

cookies are allowed for a domain.

var pieces = Math.floor(value.length/AjaxTCR.storage.DEFAULT_MAX_COOKIE_SIZE + 1);

for (var i=0;i<pieces;i++)

AjaxTCR.comm.cookie.set(key+i.toString(), value.substring(i*AjaxTCR.storage.

DEFAULT_MAX_COOKIE_SIZE, AjaxTCR.storage.DEFAULT_MAX_COOKIE_SIZE), expires);

We have no idea how many cookies were used when reading the data out of a cookie-

based storage, but we know the general formula of each piece of the value is key+piece

where piece is an integer starting at zero (for example, savedkey0,savedkey1,savedkey2). So,

to read the data out of cookie-style storage, we would use a little algorithm like so:

var i=0;

var fullvalue = "";

do {

var val = AjaxTCR.comm.cookie.get(key+i.toString());

if (val)

fullvalue += val;

i++;

} while(val);

if (fullvalue != "")

return fullvalue;

While the splitting across cookies seems quite expandable, it may be limited to as few as

20 cookies per server, though some browsers may allow more. You should assume if you

attempt to persist more than 50K with cookie storage you are starting to play with fire.

The second method for persisting data is Internet Explorer’s Persistence Behavior.

Behavior technology is leftover from the DHTML generation, but don’t dismiss this as

premillennial technology; it is quite capable. To enable the feature, define a style sheet

like so:

<style type="text/css">

.storagebin {behavior:url(#default#userData;)}

</style>

Then bind it to a <div> tag, which serves as a binding container for the storage:

<div id="persistThis" class="storagebin"></div>

To store things in IE’s persistence system, we would then find the <div> tag in question

using the DOM and use setAttribute to define the key-value pair we want to save.

However, to commit the data, you must call a save() method and pass it a string to

reference the data.

var persistObj = document.getElementById("persistThis");

persistObj.setAttribute(key,value);

persistObj.save("storageLocker");