Take your cookies to the next level with Subcookies

Cookies provide an easy way to save some user data. They can be a nice aid in usability, as they give you a way of remembering certain choices made by the user.

Browsers have placed some restrictions on the storage capacity of a cookie, though. They usually allow only 20 cookies to be stored per domain or server. To circumvent this problem, I'll explain a technique called "subcookies" to you and show you an easy Javascript way of accessing the so-called subcookies.

Access to regular cookies

First, let’s take a quick look at the cookiejar object. An object I’ve written to provide easy access to cookies. First of all; the functionality of the object is written by Peter-Paul Koch (http://www.quirksmode.org/js/cookies.HTML). All I did was wrap it all in one object and add automatic escaping of cookie data. Credit where credit’s due, eh? :)

The cookiejar object has three methods:

bake: function(cookieName,cookieValue,days,path){
fetch: function(cookieName){
crumble: function(cookieName){

The bake method creates a new cookie. Parameters are the name of the cookie, the value of the cookie, the days (as an integer) after which the cookie will expire and the path in which the cookie is accessible.
The fetch method is used to get the value of a given cookie. It takes one parameter; the name of the cookie. Lastly, the crumble method destroys a cookie, which name is given in the only parameter.

Example:

// set a cookie named 'admin' with a value of 'Harmen' to expire after 2 days
cookiejar.bake ('admin', 'Harmen', 2);

// alert the value of the cookie named 'admin'
alert (cookiejar.fetch('admin'));

// remove the cookie
cookiejar.crumble('admin');

Access to subcookies

The principle behind subcookies is simple: store multiple values in one cookie. That way, you can store more data without exceeding the browser limit of 20 cookies per domain or server.

It’s important to separate your name/value pairs with certain custom characters (characters that are unlikely to appear in a cookie’s value). For instance, let’s look at these cookies:

admin_name=Harmen
admin_age=22
admin_homepage=whatstyle.net

If we use subcookies to store this data, our cookie could look like this:

admin=name:Harmen/age:22/homepage:whatstyle.netNotice I use a colon (”:”) as the name/value separator, and a slash as the subcookie separator (”/”).

Now I can store as much data as I’d like, unrestricted by the browser’s cookie limit!

Drawbacks

Before looking at the subcookiejar object, there are some things to keep in mind when using subcookies. First, domains (or servers) are only allowed to store 4KB of data (4096 characters). Yes, you could save all your data inside one cookie, but don’t overdo it.

Second, some care must be taken in picking separating characters. In the cookies.js file you can download at the bottom of this page, I use <em>$$:$$</em> as a name/value separator and <em>$$/$$</em> as the subcookie separator. These character combinations are highly unlikely to be found inside actual cookie values. Always think about your separators. A separator which appears inside your cookie data will split up the value. Consider, for instance, this cookie:

admin_homepage=http://www.whatstyle.netIf I were to use the slash and colon mentioned above, the value would break on the “http://” prefix.

The subcookiejar object

The subcookiejar object sports the same bake, fetch and crumble methods the cookiejar object does, but they take different parameters.

`bake (cookieName,subcookieObj,days,path)`

Sets a new cookie, subcookie-style.

`cookieName`

The name of the cookie

`subcookieObj`

An object which members represent the subcookie's name. The value of that member will be the value of the subcookie.

`days`

The days (as an integer) after which the cookie will expire.

`path`

The path that has access to this cookie.

`fetch (cookieName,subcookieName)`

The `fetch` method fetches the value of the subcookie named `subcookieName` inside cookie `cookieName`.

`crumble (cookieName,subcookieName,days,path)`

Unfortunately, crumbling a given subcookie works different from crumbling a regular cookie. It loops through all the values inside the given cookie (named `cookieName`), until it finds the subcookie named `subcookieName`. It removes this subcookie from the data and _creates a new cookie containing all other name/value pairs present in the cookie._ Therefore, you have also have to provide `days` and `path` parameters, which, naturally, function in the same way as they do in the `bake` method. **Note that you can delete the entire cookie with `cookiejar.crumble`**

Example:

// create the 'cookie' object

var c = {
	name : 'Harmen',
	age : 22,
	homepage : http://www.whatstyle.net
};

// create the cookie

subcookiejar.bake ('admin', c, 2);

// alert the subcookie 'name'

alert (subcookiejar.fetch('name'));

// crumble only the subcookie 'age'

subcookiejar.crumble ('admin','age',2);

// crumble entire cookie

cookiejar.crumble('admin');

Download the file

You can download the entire cookies.js file and use it freely. Do leave a comment and tell me what you think of this technique, or tell me how I can improve it.

Note: I’ve written an updated version to this script. Click here to download Version 2, or click here to read the new article.