jquery enregistrer l'objet de données json dans le cookie

108

Comment enregistrer des données JSON dans un cookie?

Mes données JSON ressemblent à ceci

$("#ArticlesHolder").data('15', {name:'testname', nr:'4',price:'400'});
$("#ArticlesHolder").data('25', {name:'name2', nr:'1', price:'100'});
$("#ArticlesHolder").data('37', {name:'name3', nr:'14', price:'60'});

Et je veux faire quelque chose comme

var dataStore = $.cookie("basket-data", $("#ArticlesHolder").data());

et pour récupérer les données dans lesquelles je veux les charger $("#ArticlesHolder")comme

$.each($.cookie("basket-data"), function(i,e){
 $("#ArticlesHolder").data(i, e);
});

est-ce que quelqu'un sait si je suis sur la bonne voie ou cela devrait-il être fait d'une autre manière? En termes simples, comment mettre et extraire des données JSON à partir d'un cookie?

Marthin
la source
8
Juste être pédant, mais il n'y a pas de "données JSON" dans votre question. Vous avez certains objets JavaScript que vous avez définis via la notation littérale d'objet (pas JSON, JSON est un sous-ensemble de notation littérale d'objet), mais il n'y a pas de JSON. json.org Cependant, vous souhaiterez certainement utiliser JSON comme format de données pour stocker vos objets dans la chaîne de cookies.
TJ Crowder

Réponses:

195

Vous pouvez sérialiser les données au format JSON, comme ceci:

$.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));

Ensuite, pour l'obtenir à partir du cookie:

$("#ArticlesHolder").data(JSON.parse($.cookie("basket-data")));

Cela repose sur JSON.stringify()etJSON.parse() pour sérialiser / désérialiser votre objet de données, pour les navigateurs plus anciens (IE <8), incluez json2.js pour obtenir la JSONfonctionnalité. Cet exemple utilise le plugin de cookie jQuery

Nick Craver
la source
2
JSON n'est pas autorisé dans les cookies pour Opera depuis les temps anciens my.opera.com/community/forums/... J'ai aussi cette erreur. Même si @ cookie @ plugin utilise @ encodeURIComponent @, pbug ne devrait pas apparaître.
kirilloid
1
Cette question et réponse m'amènent à croire qu'il cookies'agit d'une fonction intégrée à jQuery. Cela ne semble pas être le cas. ou est-il obsolète ..? si ce sont les plugins que je trouve, un lien vers celui-ci serait génial pour éviter la confusion ...
TJ
1
@TJ Il s'agit bien d'un plugin, le plugin jQuery cookie. Vous pouvez le trouver ici: plugins.jquery.com/cookie Je me demande vraiment pourquoi ce n'est pas dans le noyau à ce stade ...
Nick Craver
Soyez prudent en utilisant ceci dans certains navigateurs. Le caractère ,(virgule) peut empêcher les cookies d'être correctement définis dans Safari et d'autres navigateurs.
Matt Seymour
Vous pouvez également utiliser cette excellente bibliothèque de cookies légers si jQuery n'est pas souhaité. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
RyBolt
40

Désormais, il n'est déjà plus nécessaire d'utiliser JSON.stringifyexplicitement. Exécutez simplement cette ligne de code

$.cookie.json = true;

Après cela, vous pouvez enregistrer n'importe quel objet dans un cookie, qui sera automatiquement converti en JSON et inversement à partir de JSON lors de la lecture du cookie.

var user = { name: "name", age: 25 }
$.cookie('user', user);
...

var currentUser = $.cookie('user');
alert('User name is ' + currentUser.name);

Mais la bibliothèque JSON n'est pas fournie avec jquery.cookie, vous devez donc la télécharger vous-même et l'inclure dans la page html avant jquery.cookie.js

Vitalii Korsakov
la source
3
J'ai essayé cette approche sans $ .cookie.json = true et j'ai obtenu [objet objet] comme valeur de cookie. Ensuite, définissez-le sur true et essayez de transmettre l'objet directement au cookie et aucun cookie n'a été rempli.
JacobRossDev
@ jacobross85 Je pense qu'il est possible que certains d'entre nous utilisent une ancienne version de jquery.cookie.js, veuillez vérifier le code source, parfois le mauvais fichier est actif.
Dexter
Veuillez noter que cela entraînera le traitement universel des cookies comme JSON. En conséquence, l'ajout aveugle $cookie.json = truepeut provoquer des conflits avec vos autres cookies. Soyez donc prudent en utilisant ceci sur un projet qui utilise déjà des cookies ailleurs!
Eric Tjossem
avez-vous une solution pour json complexe? j'ai un tableau json dans mon json dont certains attributs contiennent json et ....
nasim jahednia
7

utiliser JSON.stringify(userData)pour coverty json object to string.

var dataStore = $.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));

et pour se remettre de l'utilisation des cookies JSON.parse()

var data=JSON.parse($.cookie("basket-data"))
X Men
la source
4

Il n'est pas recommandé d'enregistrer la valeur renvoyée JSON.stringify(userData)dans un cookie; cela peut conduire à un bug dans certains navigateurs.

Avant de l'utiliser, vous devez le convertir en base64 (en utilisant btoa), et lors de sa lecture, le convertir en base64 (en utilisant atob).

val = JSON.stringify(userData)
val = btoa(val)

write_cookie(val)
Eyal Ch
la source
3
Avez-vous une référence à un navigateur qui a des problèmes avec cela?
Marthin
1
J'utilise une liste de jsons comme cookie sur chrome sur la plate-forme django. il a quelques problèmes. aussi, il est toujours préférable de masquer les données réelles transmises par le cookie à l'utilisateur
Eyal Ch
1
Du côté du serveur, la gestion standard des cookies de Python rejettera les cookies contenant {ou }, et supprimera silencieusement tous les cookies qui suivent le cookie rejeté dans l'en-tête du cookie.
snakecharmerb
2

Avec sérialiser les données au format JSON et Base64, dépendance jquery.cookie.js:

var putCookieObj = function(key, value) {
    $.cookie(key, btoa(JSON.stringify(value)));
}

var getCookieObj = function (key) {
    var cookie = $.cookie(key);
    if (typeof cookie === "undefined") return null;
    return JSON.parse(atob(cookie));
}

:)

Asimov
la source
0

Essayez celui-ci: https://github.com/tantau-horia/jquery-SuperCookie

Utilisation rapide:

créer - créer un cookie

vérifier - vérifier l'existence

verify - vérifier la valeur du cookie si JSON

check_index - vérifie si l'index existe dans JSON

read_values ​​- lit la valeur du cookie sous forme de chaîne

read_JSON - lit la valeur du cookie en tant qu'objet JSON

read_value - lecture de la valeur de l'index stocké dans l'objet JSON

replace_value - remplace la valeur d'un index spécifié stocké dans l'objet JSON

remove_value - supprime la valeur et l'index stockés dans l'objet JSON

Utilisez simplement:

$.super_cookie().create("name_of_the_cookie",name_field_1:"value1",name_field_2:"value2"});
$.super_cookie().read_json("name_of_the_cookie");
uzername_not_found
la source