jquery salvar objeto de dados json em cookie


108

Como faço para salvar dados JSON em um cookie?

Meus dados JSON se parecem com isto

$("#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'});

E eu quero fazer algo como

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

e para recuperar os dados que eu quero carregá-los $("#ArticlesHolder")como

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

alguém sabe se estou no caminho certo ou se isso deveria ser feito de outra forma? Simplificando, como faço para colocar e puxar dados json de um cookie?


8
Apenas sendo pedante, mas não há "dados JSON" em sua pergunta. Você tem alguns objetos JavaScript que definiu por meio de notação literal de objeto (não JSON, JSON é um subconjunto de notação literal de objeto), mas não há JSON lá. json.org Você quase certamente deseja usar JSON como o formato de dados para armazenar seus objetos na string de cookie.
— TJ Crowder

Respostas:


195

Você pode serializar os dados como JSON, assim:

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

Então, para obtê-lo do cookie:

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

Isso depende de JSON.stringify()eJSON.parse() para serializar / desserializar o objeto de dados, para navegadores mais antigos (IE <8) incluem json2.js para obter a JSONfuncionalidade. Este exemplo usa o plugin de cookie jQuery


2
JSON não é permitido em cookies do Opera desde os tempos antigos my.opera.com/community/forums/… Também tenho este erro. Mesmo que @ cookie @ plugin use @ encodeURIComponent @, pbug não deve aparecer.
— Kirilloid de

1
Esta pergunta e resposta me levam a acreditar que cookieé uma função embutida no jQuery. Parece que não. ou está obsoleto ..? se forem os plug-ins que encontro, criar um link para eles seria ótimo para evitar a confusão ...
— TJ

1
@TJ É de fato um plugin, o plugin de cookies jQuery. Você pode encontrá-lo aqui: plugins.jquery.com/cookie Eu realmente me pergunto por que não está no núcleo neste momento ...
— Nick Craver

Tenha cuidado ao usar isso em alguns navegadores. O ,caractere (vírgula) pode fazer com que os cookies não sejam configurados corretamente no Safari e em outros navegadores.
— Matt Seymour

Você também pode usar esta ótima biblioteca de cookies leves se jQuery não for desejado. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
— RyBolt

40

Agora já não há necessidade de usar JSON.stringifyexplicitamente. Basta executar esta linha de código

$.cookie.json = true;

Depois disso, você pode salvar qualquer objeto no cookie, que será automaticamente convertido para JSON e de volta do JSON ao ler o cookie.

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

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

Mas a biblioteca JSON não vem com jquery.cookie, então você tem que fazer o download por conta própria e incluí-la na página html antes de jquery.cookie.js


3
Tentei essa abordagem sem $ .cookie.json = true e obtive [object object] como meu valor de cookie. Em seguida, defina-o como verdadeiro e tente passar o objeto diretamente para o cookie e nenhum cookie foi preenchido.
— JacobRossDev

@ jacobross85 Acho que é possível que alguns de nós estejam usando uma versão mais antiga do jquery.cookie.js, verifique o código-fonte, às vezes o arquivo errado está ativo.
— Dexter

Observe que isso fará com que os cookies sejam universalmente tratados como JSON. Como resultado, adicionar cegamente $cookie.json = truepode causar conflitos com seus outros cookies. Portanto, tome cuidado ao usar isso em um projeto que já usa cookies em outro lugar!
— Eric Tjossem,

você tem alguma solução para json complexo? Eu tenho uma matriz json em meu json que contém alguns atributos json e ....
— nasim jahednia

7

use JSON.stringify(userData)para cobrir objeto json para string.

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

e para voltar do uso de cookies JSON.parse()

var data=JSON.parse($.cookie("basket-data"))

4

Não é uma boa prática salvar o valor retornado de JSON.stringify(userData)um cookie; isso pode causar um bug em alguns navegadores.

Antes de usá-lo, você deve convertê-lo para base64 (usando btoa), e ao lê-lo, converta de base64 (usando atob).

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

write_cookie(val)

3
Você tem uma referência a um navegador que apresenta problemas com isso?
— Marthin

1
Eu uso uma lista de jsons como um cookie no Chrome na plataforma Django. tem alguns problemas. Além disso, é sempre melhor ocultar os dados reais passados ​​pelo cookie do usuário
— Eyal Ch

1
No lado do servidor, o manuseio de cookies padrão do Python rejeitará cookies que contenham {ou }, e descartará silenciosamente todos os cookies que seguem o cookie rejeitado no cabeçalho do cookie.
— snakecharmerb

2

Com serializar os dados como JSON e Base64, dependência 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

Experimente este: https://github.com/tantau-horia/jquery-SuperCookie

Uso rápido:

criar - criar cookie

verificar - verificar existência

verificar - verificar o valor do cookie se JSON

check_index - verifique se o índice existe em JSON

read_values ​​- lê o valor do cookie como string

read_JSON - lê o valor do cookie como objeto JSON

read_value - ler o valor do índice armazenado no objeto JSON

substituir_valor - substitui o valor de um índice especificado armazenado no objeto JSON

remove_value - remove o valor e o índice armazenado no objeto JSON

Apenas use:

$.super_cookie().create("name_of_the_cookie",name_field_1:"value1",name_field_2:"value2"});
$.super_cookie().read_json("name_of_the_cookie");
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.