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.