How do I store an array of objects in a cookie with jQuery $.cookie()?

Question

I have a list of javascript objects:

var people = [
   { 'name' : 'Abel', 'age' : 1 },
   { 'name' : 'Bella', 'age' : 2 },
   { 'name' : 'Chad', 'age' : 3 },
]

I tried to store them in a browser cookie with jQuery $.cookie():

$.cookie("people", people);

I then retrieve this cookie and then try to push another object into it:

var people = $.cookie("people");
people.push(
    { 'name' : 'Daniel', 'age' : 4 }
);

However, this does not work; I analyzed this code in Firebug, and Console noted that people was a string ("[object Object],[object Object],[object Object]") and that the push function did not exist.

What is going on? What is the proper way to store and retrieve a list of objects?

Answer 1

Cookies can only store strings. Therefore, you need to convert your array of objects into a JSON string. If you have the JSON library, you can simply use JSON.stringify(people) and store that in the cookie, then use $.parseJSON(people) to un-stringify it.

In the end, your code would look like:

var people = [
   { 'name' : 'Abel', 'age' : 1 },
   { 'name' : 'Bella', 'age' : 2 },
   { 'name' : 'Chad', 'age' : 3 },
];
$.cookie("people", JSON.stringify(people));
// later on...
var people = $.parseJSON($.cookie("people"));
people.push(
    { 'name' : 'Daniel', 'age' : 4 }
);
$.cookie("people", JSON.stringify(people));

Answer 2

I attempted this today and could not get it to work. Later i found out that it was because I had 3 very large objects which I tried to save in a cookie.

The way I worked arround this was by storing the information in the browsers local storage.

example:

localStorage.setItem("test2", JSON.stringify(obj) )

localStorage.getItem("test2")

further info about local storage: cookies vs local storage

4 hours of my time vent to this, dont make the same mistake.