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?


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


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


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"))

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)

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));
}

:)


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");
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.