I need to store an array in a jQuery cookie, any one help me please?
I need to store an array in a jQuery cookie, any one help me please?
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.
//EDIT: Modified from linked answer by Nick see
// http://stackoverflow.com/questions/3387251/how-to-store-array-in-jquery-cookie
$.cookie(cookieName, items.join(','));
},
"remove": function (val) {
//EDIT: Thx to Assef and luke for remove.
indx = items.indexOf(val);
if(indx!=-1) items.splice(indx, 1);
$.cookie(cookieName, items.join(',')); },
"clear": function() {
items = null;
//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.
EDIT See bravos answer if you having issues with IE
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") );
Check out my implementation (as a jquery plugin):
(function ($) {
$.fn.extend({
cookieList: function (cookieName) {
var cookie = $.cookie(cookieName);
var items = cookie ? eval("([" + cookie + "])") : [];
return {
add: function (val) {
var index = items.indexOf(val);
// Note: Add only unique values.
if (index == -1) {
items.push(val);
$.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
}
},
remove: function (val) {
var index = items.indexOf(val);
if (index != -1) {
items.splice(index, 1);
$.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
}
},
indexOf: function (val) {
return items.indexOf(val);
},
clear: function () {
items = null;
$.cookie(cookieName, null, { expires: 365, path: '/' });
},
items: function () {
return items;
},
length: function () {
return items.length;
},
join: function (separator) {
return items.join(separator);
}
};
}
});
})(jQuery);
Usage:
var cookieList = $.fn.cookieList("cookieName");
cookieList.add(1);
cookieList.add(2);
cookieList.remove(1);
var index = cookieList.indexOf(2);
var length = cookieList.length();
This implementation provides independent access for multiple controls on the page:
(function ($) {
$.fn.extend({
cookieList: function (cookieName) {
return {
add: function (val) {
var items = this.items();
var index = items.indexOf(val);
// Note: Add only unique values.
if (index == -1) {
items.push(val);
$.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
}
},
remove: function (val) {
var items = this.items();
var index = items.indexOf(val);
if (index != -1) {
items.splice(index, 1);
$.cookie(cookieName, items.join(','), { expires: 365, path: '/' });
}
},
indexOf: function (val) {
return this.items().indexOf(val);
},
clear: function () {
$.cookie(cookieName, null, { expires: 365, path: '/' });
},
items: function () {
var cookie = $.cookie(cookieName);
return cookie ? eval("([" + cookie + "])") : []; ;
},
length: function () {
return this.items().length;
},
join: function (separator) {
return this.items().join(separator);
}
};
}
});
})(jQuery);