comment stocker un tableau dans le cookie JQuery?
J'ai besoin de stocker un tableau dans un cookie jQuery, est-ce que quelqu'un peut m'aider, s'il vous plaît?
Vous ne savez toujours pas exactement ce dont vous avez besoin, mais j'espère que cela vous aidera ... Ceci est un exemple qui vous permettra d’accéder aux éléments de n’importe quelle page, c’est juste un exemple! Il utilise le nom de cookie pour l’identifier à 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;
}
}
}
Donc, sur n'importe quelle page, vous pouvez obtenir les éléments comme celui-ci.
var list = new cookieList("MyItems"); // all items in the array.
Ajout d'éléments à la liste de cookies
list.add("foo");
//Note this value cannot have a comma "," as this will spilt into
//two seperate values when you declare the cookieList.
Obtenir tous les éléments sous forme de tableau
alert(list.items());
Effacement des objets
list.clear();
Vous pouvez ajouter des choses supplémentaires telles que Push et Pop assez facilement ... Encore une fois, espérons que cela vous aidera.
EDIT Voir réponse bravos si vous rencontrez des problèmes avec IE
Téléchargez le plugin jQuery cookie ici: http://plugins.jquery.com/project/Cookie
Définir un cookie avec jQuery est aussi simple que cela: nous créons un cookie appelé "exemple" avec une valeur de ["foo1", "foo2"]
$.cookie("example", ["foo1", "foo2"]);
Obtenir la valeur du cookie est également très facile avec jQuery. Ce qui suit montre la valeur du cookie "exemple" dans une fenêtre de dialogue.
alert( $.cookie("example") );
J'ai eu une erreur quand j'essaie d'utiliser le script d'almog.ori dans IE 8
//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;
}
}
}
après quelques heures à creuser l'erreur, je ne me suis rendu compte que l'index de
"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(',')); },
n'est pas pris en charge dans IE 8.
et j'ajoute donc une autre base de code à partir d'ici Comment réparer Array indexOf () en JavaScript pour les navigateurs Internet Explorer
Ça marche,
"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(','));
},
au cas où quelqu'un trouverait que le script ne fonctionne pas dans IE 8, cela pourrait aider.
Je ne sais pas si cela va aider quelqu'un, mais j'avais également besoin de la fonction qui vérifie si l'élément est déjà là, donc je ne l'ajoute pas à nouveau.
J'ai utilisé la même fonction remove et le modifie pour qu'il contienne une fonction:
"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;
}
},
pour une raison quelconque, le code ci-dessus ne fonctionne pas toujours. alors voici le nouveau qui fonctionne:
"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;
}
},
Découvrez mon implémentation (en tant que plugin 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);
Usage:
var cookieList = $.fn.cookieList("cookieName");
cookieList.add(1);
cookieList.add(2);
cookieList.remove(1);
var index = cookieList.indexOf(2);
var length = cookieList.length();
Beau morceau de code pour ce que je fais en ce moment, mais j'ai trouvé un bug. Je sauvegardais une liste d'entiers (ID) dans le cookie. Cependant, lorsque le cookie est lu pour la première fois, il est converti en chaînes. J'ai précédemment enregistré (int) 1, et plus tard, lorsque le cookie est récupéré sur un rechargement de page, il est désigné par "1". Ainsi, lorsque j'essaie de supprimer (int) 1 de la liste, il n'indexe pas de correspondance.
Le correctif que j'ai appliqué consiste à modifier les expressions "val" en val.toString () avant d'ajouter ou d'indexer les éléments. Ainsi, items est un tableau de chaînes.
"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(','));
},
J'ai légèrement modifié l'exemple pour utiliser l'encodage JSON et le décodage secureJSON, ce qui le rend plus robuste et économise.
Cela dépend de 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);
Cette implémentation fournit un accès indépendant à plusieurs contrôles de la 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);
C’est ainsi que vous stockez et récupérez un tableau dans un cookie à l’aide de json et jquery.
//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.
J'ai ajouté l'action "remove" à celui qui veut l'utiliser - val est l'index auquel commencer à modifier le tableau:
"remove": function (val) {
items.splice(val, 1);
$.cookie(cookieName, items.join(','));
}
juste une petite alternative à la fonction "remove":
"removeItem": function (val) {
indx = items.indexOf(val);
if(indx!=-1) items.splice(indx, 1);
$.cookie(cookieName, items.join(','));
}
où val est la valeur d'un élément du tableau, par exemple:
>>> list.add("foo1");
>>> list.add("foo2");
>>> list.add("foo3");
>>> list.items();
["foo1", "foo2", "foo3"];
>>> list.removeItem("foo2");
>>> list.items();
["foo1", "foo3"];
Vous pouvez sérialiser les tableaux avant de les stocker en tant que cookie, puis les désérialiser lors de la lecture. c'est à dire avec json?
Voici l'implémentation de JSON pour travailler avec les cookies, un moyen bien plus efficace de stocker arrays. testé de mon côté.
$.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: '/' });
}
};
}
});