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?

$.cookie( "people", $.param(people) ); This worked perfectly to me — Nejthe, Jan 30 '15 at 12:28

Kevin B · Accepted Answer · 2015-02-09T05:28:06.770

34

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));

edited Feb 09 '15 at 05:28

answered Jan 27 '12 at 21:12

Kevin B

94,570
16
163
180

Thank you, what is the JSON library? – dangerChihuahua007 Jan 27 '12 at 21:21
found this very helpful but this var people = $.parseJSON($.cookie("people");) should be this var people = $.parseJSON($.cookie("people")); ";" is out of place. – ARWVISIONS Feb 09 '15 at 05:26
@ARWVISIONS better? Hard to tell, on a mobile device. – Kevin B Feb 09 '15 at 05:28

score 7 · Answer 2 · answered Aug 20 '15 at 14:48

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.

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

2 Answers2