Now we can store and retrieve JavaScript Objects, Arrays, Boolean, String, Number values using cookies, just like storing Java Objects in session on the server side.

Works with Firefox 1.5, 2.0, IE 6.0 and Opera 9.10.

Example

(Execute this example)

jar = new CookieJar({
expires:3600,   // seconds
path: '/'
});
 
dog = {name: 'Jacky', breed: 'Alsatian', age:5};
 
jar.put('mydog', dog);
mydog = jar.get('mydog');
 
alert("My dog's name is " + mydog.name);
alert("He is " + mydog.age + " years old");
alert("He is an " + mydog.breed);

Download

You can view the source code here.
This code is released under CC Attribution-ShareAlike 2.5

This code is released under Apache Software License.

API

CookieJar(options)
Constructor. Takes in a object as options.

options = {
expires: '',  // time in seconds (defualt: 3600)
path: '',     // cookie path
domain: '',   // cookie domain
secure: ''    // secure ?
}

boolean put(string name, mixed value)
Puts a particular cookie in the cookie jar. The cookie is associated with the name. Returns false if cannot add cookie (Ex: max cookie size exceeded!). Returns true on success.

mixed get(string name)
Gets a particular cookie from the cookie jar. Returns null if not found.

boolean remove(string name)
Removes a particular cookie from the cookie jar. Returns true on success, false otherwise.

void empty()
Empties the Cookie Jar.

array getKeys()
Gets array of all the cookie names.

object getPack()
Gets all the cookies as a single JavaScript object (Package) with name value pairs.

Change Log

v 0.5 (26-Jan-09)

1. Changed the License to Apache Software License 2.0

v 0.4 (11-Aug-07)

1. Removed a extra comma in options (was breaking in IE and Opera). (Thanks Jason)
2. Removed the parameter name from the initialize function
3. Changed the way expires date was being calculated. (Thanks David)

v 0.3 (22-Jun-07)

1. Removed dependancy on json.js (http://www.json.org/json.js)
2. empty() function only deletes the cookies set by CookieJar. Leaves alone other cookies like session_id etc.

v 0.2 (12-Apr-07)

1. Released for public use.

Related

• Ajaxian review
• MooTools port
• jQuery port

How does it work?

This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of characters of same font-size.

We try to create a string with a specified font-face. If the font-face is not available, it takes up the font-face of the parent element. We then compare the width of the string with the specified font-face and width of the string with the font-face of the parent element, if they are different, then the font exists, otherwise not.

The string which we will use to generate the widths can be anything. But I guess we use ‘m’ or ‘w’ because these two characters take up the maximum width. And we use a trailing ‘l’ so that the same width fonts-faces can get separated based on the width of l character.

I have tested it on Firefox 2, 3, 3.5 IE 6, IE 7, Opera 9, Opera 10.

^Update Now works on Opera 9.10. It required to execute the script after its completely loaded. I guess, Opera cannot calculate the offset width until all the parents are completely loaded.

^{Update (10-Jul-09)} Fixed the Tests failing on Firefox 3 issue. changed comparison font to serif from sans-serif, as in FF3.0 font-face of child element didn’t fallback to font-face of parent element if the font-face of child element is missing.

Download

Get the JavaScript code here.

Released under CC Attribution-ShareAlike 2.5

You can also see Lemmi’s version of the script as Prototype plug-in here.

Demo

You can test any Font here:

// Usage
var detective = new Detector();
alert(detective.test('font name'));

Fonts on your computer

This table below shows which fonts are present on your system. (I have listed some of the most common and some uncommon fonts.)

Johan Sundström has presented this data in a more interesting and cool layout here. Thanks Johan!