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.