Javascript cookie objects using Prototype and JSON

nospam@example.com (David Winterbottom) — Fri, 07 Nov 2008 17:00:24 +0000

It's sometime useful to interact with cookies directly on the client-side using javascript. This can be useful for a variety of situations, such as persisting display settings between page requests without storing anything on the server. I've also used them to display a simple welcome message to new visitors. It can make your controller code simpler if this kind of simple display logic is contained entirely on the client side.

To this end, I use the following simple Cookies object, build on top of the Prototype Javascript library (version > 1.5):

The API is simple: cookie objects are created with optional path and domain arguments to the constructor. The set(), get() and clear() methods are then used to define the name=value pairs that cookies comprise. In addition, the get() method takes an optional third parameter for setting the expiry time in days if you want the data persisted longer than the current session.

Cookies can now be interacted with in the following manner:

var biscuits = new Cookies();
biscuits.set('show_nav', 'yes');
if (biscuits.get('show_nav') {
// Show the navigation...
}

The above object is useful for storing simple string data, but we can easily extend the above to allow arrays and objects to be persisted in the cookie by using JSON.

As we're overriding the set and get methods, the API remains the same:

// Persist some array data
var hobnobs = new JsonCookies();
hobnobs.set('selectedIds', [12,46,32], 7)

// On a different request, use the data
var hobnobs = new JsonCookies();
var selectedIds = hobnobs.get('selectedIds');
if (selectedIds) {
// Do something with the selected ids
}

As this object does not rely on the DOM in any way, it is easily testable as it requires little in the way of fixtures. What follows is set of unit tests that work with the JSUnit testing suite. You can run the unit tests directly, using the JSUnit test runner.

One minor shortcoming of the present version of JSUnit is that it is difficult to test equality of arrays and objects. The simple work-around used above is to test equality of their JSON encodings, which acheives the same end without resorting to looping through comparing property by property.

It should be noted that I am far from the first person to create Javascript cookie objects in this way - here are a few others doing similar things:

The main difference is that my objects use an inheritance structure to add the JSON-encoding facilities and throw errors when invalid arguments are passed. Also, I have another post in the pipeline which builds on these cookie objects to do something cool. Watch this space.

Code in the hole (Entries tagged as json)

Javascript cookie objects using Prototype and JSON