Active record javascript objects using cookies

nospam@example.com (David Winterbottom) — Sat, 08 Nov 2008 18:29:01 +0000

Building on a previous post on javascript cookie objects, it is possible to create a simple layer supertype object that persists objects between requests. This works by defining an active-record-like interface for saving an object's properties to a JSON-encoded cookie. Objects can then be reloaded on later requests and will have all their properties populated automatically.

Such behaviour can be useful in javascript-heavy applications, where complex javascript objects are used that don't map easily back to server-side data. In these instance, it is much easier to persist these objects on the client-side.

Once more, this extension relies on the Prototype javascript library to provide the mechanisms for class definition and inheritance.

The layer supertype is defined as follows:

There's nothing difficult here: this object composes an instance of the JsonCookies object and then persists the object properties in a JSON-encoded cookie when the save() method is called. On later instantiations, the object checks for a matching cookie and, if one exists, reloads the properties.

The only subtlety is to carefully choose an immutable id to identify the object. Of course, in the absence of auto-incrementing database fields to provide (meaningless) object ids, one would have to choose another suitable identifier which was immutable with respect to the object in question.

Basic usage would then involve defining simple subclasses:

var Person = Class.create(PersistentObject, {
name: null,
initialize: function($super, id) {
$super('person_'+id);
},
sayName: function() {
alert('My name is '+this.name);
}
});

Instances of this person object can then be manipulated as follows:

var me = new Person(1); // 1 is the immutable id for this person
me.name = 'David';
me.save(); // This writes the name data to a JSON-encoded cookie identified by person_1

// In later request, reload object
me = new Person(1);
me.sayName();

// And later on - best to clean up as cookie storage is limited
me = new Person(1);
me.delete();

A working set of unit-tests can be run that tests the above object using a simple stub - these use the JSUnit test suite.

Health warning

It should be noted that there are several shortcomings with using cookies for data persistence in this way To start with:

Cookie storage is limited to around 4kb and around 20 key-value pairs per domain. This covers all cookies including google analytics and other gubbins.
Cookies are transmitted over HTTP for every request. Having several JSON-encoded object strings in the header of every request is a rather unnecessary overhead.
Cookies are stored on the client's machine and are thus susceptible to tampering or snooping.

For these reasons, it is always a good idea to delete object cookies as soon as they are finished with.

Even with these limitations, persisting objects on the client-side is still a useful option - to be used carefully of course.

Update: the source code for this persistent object is now available through the Prototype extensions site Scripteka.

Code in the hole (Entries tagged as design patterns)

Active record javascript objects using cookies

Health warning