Subcookies in jQuery

I was looking at YUI Api and I thought I find a new concept : subcookies.  But by reading the docs I realized that the concept is not new, as I’ve used it before. The idea comes from the limit that the browsers are puting to the cookie number, 20 per domain. This usually makes you try to push as much information on the cookie, instead of creating new cookies for each variable that you may want on the clients side. What you do is basically store serialized data in the cookie string.

A server side solution of this problem is to keep only a cookie with a hash on the client side and read/save all the variables associated with that hash on server side or database. Downside to this approach is that you have to make an extra call server/db call each time you wanna know the values.

The interesting thing is that YUI implements a mechanism to read/write this subcookie data. I’ve tried to do the same in jQuery starting from $.cookie plugin and I’ve come up with this usage.

* Create a cookie with the given name, part and value and other optional parameters.
* If the part parameter is passed the value will be asigned to the part key
* @example $.cookie('the_cookie', 'part', 'the_value');
* @desc Set the value of a cookie. If part parameter is present it will create the value in serialized form
* @example: $.cookie('the_cookie', null, 'the_value') // creates a cookie with value "the_value"
* @example: $.cookie('the_cookie, 'name', 'the_name') // creates a cookie with value "name=the_name"
* @example: $.cookie('the_cookie, 'prename','second_name') // will add info to the cookie value "name=the_name&prename=second_name"
* @example $.cookie('the_cookie', null, 'the_value', {expires: 7, path: '/', domain: '', secure: true});
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', null, 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie','name', null);
* @desc Delete the name value
* @example $.cookie('the_cookie',null, null);
* @desc Delete a cookie by passing null as value.
* @param String name The name of the cookie.
* @param String part The key for the array.
* @param String value The value of the cookie or of the element.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
$.cookie('TheCookie', 'first_key', 'value1', options); // will write the cookie
$.cookie('TheCookie', 'second_key', 'value2', options); // will add the second_key info
alert($.cookie('TheCookie', 'second_key')); // will alert value2
console.log( $.cookie('TheCookie')); // "first_key=value1&second_key=value2

You can see a demo of jQuery Subcookie here. This is only a draft but I could rewrite it in a serious plugin if any interes is shown and you think this is could be useful.

About this entry