How to store objects and arrays in HTML5 localStorage?

Question

Ok, I have to use the localStorage to store an object, and an array. However, whenever i set something, it stores a string value instead. For example:

var x = [1,2,3];
localStorage["x"] = x;
console.debug(x); //[1, 2, 3]
console.debug(localStorage["x"]); //"1,2,3"

and objects:

var o = {foo:1};
localStorage["o"] = o;
console.debug(localStorage["o"]); //[object Object]
console.debug(o); //Object \ foo: 1 \ __proto__: Object

(\s are line breaks)

How do you store objects and arrays within localStorage.

Also, what is the difference between localStorage, sessionStorage and document.cookie? thanks.