UPDATE: This code is now in the plugins directory of the mootools library as Hash.Cookie.

Over on Ajaxian there was a recent post about a little Prototype.js dependent class called CookieJar.

Lalit Patel has created a JavaScript Library to use JSON to store data in cookies. JSON Cookies is built on top of Prototype and gives you a simple API to put and get JSON values into cookies

I liked the idea, so I wrote a version for Mootools. The Mootools version is a little different and adds some functionality (for merging data) and it stores its info a little differently, but it's basically the same concept.

Examples:

PLAIN TEXTexecute this code
JavaScript:
var cookieJar = new Cookie.Json('clientSideTest');

/* writes a new object in its entirety */
cookieJar.save({
  apple: 'red',
  lemon: 'yellow'
});
console.log(cookieJar.get('apple')); /* logs 'red' */

/* adds a key/value */
cookieJar.set('lime','green');
console.log(cookieJar.get('lime')); /* logs 'green' */

/* merges new data, overwriting anything already present */
cookieJar.merge({
  apple: {
    sweet: 'red',
    sour: 'green'
  },
  grape: 'purple'
});
console.log(cookieJar.get('apple').sour); /* logs 'green' */

/* fills in data, leaving anything already present; so apple is not overwritten */
cookieJar.fill({
  apple: 'red',
  orange: 'orange'
});
console.log(cookieJar.get('apple')); /* logs {sweet: 'red', sour: 'green'}  */

/* empties the cookie jar */
cookieJar.empty();

var cookieJar = new Cookie.Json('clientSideTest');

/* writes a new object in its entirety */
cookieJar.save({
apple: 'red',
lemon: 'yellow'
});
console.log(cookieJar.get('apple')); /* logs 'red' */

/* adds a key/value */
cookieJar.set('lime','green');
console.log(cookieJar.get('lime')); /* logs 'green' */

/* merges new data, overwriting anything already present */
cookieJar.merge({
apple: {
sweet: 'red',
sour: 'green'
},
grape: 'purple'
});
console.log(cookieJar.get('apple').sour); /* logs 'green' */

/* fills in data, leaving anything already present; so apple is not overwritten */
cookieJar.fill({
apple: 'red',
orange: 'orange'
});
console.log(cookieJar.get('apple')); /* logs {sweet: 'red', sour: 'green'} */

/* empties the cookie jar */
cookieJar.empty();

drag to resize


You can see the script in the Mootools dev repository.