how to store an array in jquery cookie?

Question

Hi, I need to store an array in a jQuery cookie, any one help me please?

Answer 1

Download the jQuery cookie plugin here: http://plugins.jquery.com/project/Cookie

Setting a cookie with jQuery is as simple as this, where we are creating a cookie called "example" with a value of ["foo1", "foo2"]

$.cookie("example", ["foo1", "foo2"]);

Getting the cookie's value is also very easy with jQuery. The following would show the value of the "example" cookie in a dialog window

alert( $.cookie("example") );

Answer 2

Still not exactly sure what you need but i hope this will help. This is a sample that will allow you to access the items on any page, its just a sample! It uses the cookieName to identify it across the pages.

//This is not production quality, its just demo code.
var cookieList = function(cookieName) {
//When the cookie is saved the items will be a comma seperated string
//So we will split the cookie by comma to get the original array
var cookie = $.cookie(cookieName);
//Load the items or a new array if null.
var items = cookie ? cookie.split(/,/) : new Array();

//Return a object that we can use to access the array.
//while hiding direct access to the declared items array
//this is called closures see http://www.jibbering.com/faq/faq_notes/closures.html
return {
    "add": function(val) {
        //Add to the items.
        items.push(val);
        //Save the items to a cookie.
        $.cookie(cookieName, items);
    },
    "clear": function() {
        //clear the cookie.
        $.cookie(cookieName, null);
    },
    "items": function() {
        //Get all the items.
        return items;
    }
  }
}

So on any page you can get the items like this.

var list = new cookieList("MyItems"); // all items in the array.

Adding items to the cookieList

list.add("foo"); 
//Note this value cannot have a comma "," as this will spilt into
//two seperate values when you declare the cookieList.

Getting all the items as an array

alert(list.items());

Clearing the items

list.clear();

You can add additional things like push and pop quite easily. Again hope this helps.

Answer 3

You could serialize the arrays before storing as cookie and then deserialize when reading. ie with json?

Answer 4

Hi almog.ori and all wise guy out there, I had a failure when applying your code. When I getting list of items, it return null but when I alert in onclick event, eventually it push value into that array. Can you help me with this, thank in advance.. Sample Code :

var list = new cookieList("test");
$(img).one('click', function(i){
while($('.selected').length < 3) {
    $(this).parent()
        .addClass("selected")
        .append(setup.config.overlay);

    //$.cookie(setup.config.COOKIE_NAME, d, setup.config.OPTS);
    var index = $(this).parent().index();

    // suppose this array go into cookies.. but failed
    list.add( index );

    var count = 'You have selected : <span>' + $('.selected').length + '</span> deals';
    if( $('.total').length ){
        $('.total').html(count);
    }

} 
});

When I check through Firefox cookies, it seem doesn't save cookie session.