如何在jQuery Cookie中存储数组？
我需要将数组存储在一个jQuery cookie中，任何一个请帮助我？
仍然不完全确定你需要什么，但我希望这会有所帮助。 这是一个示例，可以让您访问任何页面上的项目，只是一个示例！ 它使用cookieName在页面中标识它。
//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; } } } 所以在任何页面上你都可以得到这样的项目。
var list = new cookieList("MyItems"); // all items in the array.
将项目添加到cookieList
list.add("foo"); //Note this value cannot have a comma "," as this will spilt into //two seperate values when you declare the cookieList.
获取所有的项目作为一个数组
alert(list.items());
清理项目
list.clear();
你可以很容易地添加额外的东西，如push和pop。 再次希望这有助于。
编辑如果您遇到与IE问题，请参阅bravos答案
在这里下载jQuery cookie插件： http ： //plugins.jquery.com/project/Cookie
使用jQuery来设置cookie就像这样简单，我们在这里创build一个名为“example”的cookie，其值为[“foo1”，“foo2”]
$.cookie("example", ["foo1", "foo2"]);
使用jQuery获取cookie的值也非常简单。 以下将在对话窗口中显示“示例”cookie的值
alert( $.cookie("example") );
看看我的实现（作为一个jQuery插件）：
(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);
用法：
var cookieList = $.fn.cookieList("cookieName"); cookieList.add(1); cookieList.add(2); cookieList.remove(1); var index = cookieList.indexOf(2); var length = cookieList.length();
当我尝试在IE 8中使用almog.ori的脚本时出现错误
//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 // https://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; } } }
经过几个小时的挖掘错误，我只实现了indexOf in
"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(',')); },
在IE 8中不支持。
所以我从这里添加另一个代码库如何修复JavaScript的Internet Explorer浏览器中的数组indexOf（）
有用，
"remove": function (val) { //EDIT: Thx to Assef and luke for remove. /** indexOf not support in IE, and I add the below code **/ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; } } var indx = items.indexOf(val); if(indx!=-1) items.splice(indx, 1); //if(indx!=-1) alert('lol'); $.cookie(cookieName, items.join(',')); },
以防万一任何人发现脚本不在IE 8中工作，这可能会有所帮助。
我不知道这是否会帮助某人，但我也需要检查项目已经存在的function，所以我不再添加它。
我使用了相同的删除function，并将其更改为包含function：
"contain": function (val) { //Check if an item is there. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; }; } var indx = items.indexOf(val); if(indx>-1){ return true; }else{ return false; } },
由于某种原因上面的代码并不总是工作。 所以这里是新的工作：
"contain": function (val) { //Check if an item is there. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; }; } var indx = items.join(',').indexOf(val); if(indx > -1){ return true; }else{ return false; } },
该实现为页面上的多个控件提供了独立的访问权限：
(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);
我稍微调整了示例以使用JSON编码和secureJSON解码，使其更加健壮和保存。
这取决于https://code.google.com/p/jquery-json/
/* * Combined with: * http://www.terminally-incoherent.com/blog/2008/11/25/serializing-javascript-objects-into-cookies/ * With: * https://code.google.com/p/jquery-json/ * */ (function ($) { $.fn.extend({ cookieList: function (cookieName, expireTime) { var cookie = $.cookie(cookieName); var items = cookie ? $.secureEvalJSON(cookie) : []; return { add: function (val) { var index = items.indexOf(val); // Note: Add only unique values. if (index == -1) { items.push(val); $.cookie(cookieName, $.toJSON(items), { expires: expireTime, path: '/' }); } }, remove: function (val) { var index = items.indexOf(val); if (index != -1) { items.splice(index, 1); $.cookie(cookieName, $.toJSON(items), { expires: expireTime, path: '/' }); } }, indexOf: function (val) { return items.indexOf(val); }, clear: function () { items = null; $.cookie(cookieName, null, { expires: expireTime, path: '/' }); }, items: function () { return items; }, length: function () { return items.length; }, join: function (separator) { return items.join(separator); } }; } }); })(jQuery);
好的一段代码，我正在做什么，但发现了一个错误。 我正在保存一个整数列表（ID）的cookie。 然而，当第一次读取cookie时，它会转换为string。 我以前保存（int）1，后来当一个页面上检索cookie重新加载被指定为“1”。 因此，当我尝试从列表中删除（int）1时，它不会索引匹配。
我应用的修正是在添加或索引项目之前将“val”expression式更改为val.toString（）。 因此项目是一个string数组。
"add": function(val) { //Add to the items. items.push(val.toString()); //Save the items to a cookie. $.cookie(cookieName, items.join(',')); }, "remove": function (val) { //EDIT: Thx to Assef and luke for remove. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; }; } var indx = items.indexOf(val.toString()); if(indx!=-1) items.splice(indx, 1); //Save the items to a cookie. $.cookie(cookieName, items.join(',')); },
这是如何使用json和jquery在cookie中存储和检索数组。
//Array var employees = [ {"firstName" : "Matt", "lastName" : "Hendi"}, {"firstName" : "Tim", "lastName" : "Rowel"} ]; var jsonEmployees = JSON.stringify(employees);//converting array into json string $.cookie("employees", jsonEmployees);//storing it in a cookie var empString = $.cookie("employees");//retrieving data from cookie var empArr = $.parseJSON(empString);//converting "empString" to an array.
我将"remove"操作添加到想要使用它的人 – val是开始更改数组的索引：
"remove": function (val) { items.splice(val, 1); $.cookie(cookieName, items.join(',')); }
只是一个替代"remove"function：
"removeItem": function (val) { indx = items.indexOf(val); if(indx!=-1) items.splice(indx, 1); $.cookie(cookieName, items.join(',')); }
其中val是数组中项目的值，例如：
>>> list.add("foo1"); >>> list.add("foo2"); >>> list.add("foo3"); >>> list.items(); ["foo1", "foo2", "foo3"]; >>> list.removeItem("foo2"); >>> list.items(); ["foo1", "foo3"];
您可以在存储为cookie之前序列化数组，然后在读取时反序列化。 即与JSON？
这里是使用cookie的JSON实现，更好的方式来存储数组 。 从我的结束testing。
$.fn.extend({ cookieList: function (cookieName) { var cookie = $.cookie(cookieName); var storedAry = ( cookie == null ) ? [] : jQuery.parseJSON( cookie ); return { add: function (val) { var is_Arr = $.isArray( storedAry ); //console.log(storedAry); if( $.inArray(val, storedAry) === -1 ){ storedAry.push(val); //console.log('inside'); } $.cookie( cookieName, JSON.stringify(storedAry), { expires : 1 , path : '/'}); /*var index = storedAry.indexOf(val); if (index == -1) { storedAry.push(val); $.cookie(cookieName, storedAry.join(','), { expires: 1, path: '/' }); }*/ }, remove: function (val) { storedAry = $.grep(storedAry, function(value) { return value != val; }); //console.log('Removed '+storedAry); $.cookie( cookieName, JSON.stringify(storedAry), { expires : 1 , path : '/'}); /*var index = storedAry.indexOf(val); if ( index != -1 ){ storedAry.splice( index, 1 ); $.cookie(cookieName, storedAry.join(','), { expires: 1, path: '/' }); }*/ } clear: function () { storedAry = null; $.cookie(cookieName, null, { expires: 1, path: '/' }); } }; }
}）;
