jquery Zapisz obiekt danych JSON w pliku cookie

108

Jak zapisać dane JSON w pliku cookie?

Moje dane JSON wyglądają tak

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

A ja chcę zrobić coś takiego

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

i odzyskać dane, chcę, aby załadować go do $("#ArticlesHolder")jak

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

czy ktoś wie, czy jestem na dobrej drodze, czy też należy to zrobić w inny sposób? Mówiąc najprościej, jak umieścić i pobrać dane JSON z pliku cookie?

Marthin
źródło
8
Jestem pedantyczny, ale w pytaniu nie ma „danych JSON”. Masz kilka obiektów JavaScript, które zdefiniowałeś za pomocą notacji literału obiektowego (nie JSON, JSON jest podzbiorem notacji literału obiektowego), ale nie ma tam JSON. json.org Prawie na pewno chcesz użyć JSON jako formatu danych do przechowywania obiektów w ciągu cookie.
TJ Crowder

Odpowiedzi:

195

Możesz serializować dane jako JSON, na przykład:

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

Następnie, aby uzyskać to z pliku cookie:

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

To zależy od JSON.stringify()iJSON.parse() do serializacji / deserializacji swój obiekt danych, dla starszych przeglądarek (IE <8) obejmują json2.js aby uzyskać JSONfunkcjonalność. W tym przykładzie zastosowano wtyczkę do plików cookie jQuery

Nick Craver
źródło
2
JSON nie jest dozwolony w plikach cookie Opery od czasów starożytnych my.opera.com/community/forums/ ... Ja też mam ten błąd. Nawet jeśli @ cookie @ plugin używa @ encodeURIComponent @, pbug nie powinien się pojawiać.
kirilloid
1
To pytanie i odpowiedź prowadzą mnie do przekonania, że cookiejest to funkcja wbudowana w jQuery. Wydaje się, że tak nie jest. czy jest przestarzałe ..? jeśli są to wtyczki, które znajduję, linkowanie do nich byłoby świetne, aby uniknąć nieporozumień ...
TJ
1
@TJ To rzeczywiście wtyczka, wtyczka cookie jQuery. Możesz go znaleźć tutaj: plugins.jquery.com/cookie Naprawdę zastanawiam się, dlaczego nie jest to w rdzeniu w tym momencie ...
Nick Craver
Uważaj, używając tego w niektórych przeglądarkach. Znak ,(przecinek) może spowodować nieprawidłowe ustawienie plików cookie w przeglądarce Safari i innych przeglądarkach.
Matt Seymour,
Możesz również użyć tej wspaniałej, lekkiej biblioteki plików cookie, jeśli nie jest potrzebny jQuery. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
RyBolt
40

Teraz nie ma już potrzeby JSON.stringifyjawnego używania . Po prostu wykonaj tę linię kodu

$.cookie.json = true;

Następnie możesz zapisać dowolny obiekt w pliku cookie, który zostanie automatycznie przekonwertowany na JSON iz powrotem z JSON podczas odczytu pliku cookie.

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

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

Ale biblioteka JSON nie zawiera jquery.cookie, więc musisz ją pobrać samodzielnie i dołączyć do strony html przed jquery.cookie.js

Vitalii Korsakov
źródło
3
Wypróbowałem to podejście bez $ .cookie.json = true i otrzymałem [obiekt obiektu] jako moją wartość cookie. Następnie ustaw wartość true i próbujesz przekazać obiekt bezpośrednio do pliku cookie, ale żaden plik cookie nie został wypełniony.
JacobRossDev
@ jacobross85 Myślę, że to możliwe, że niektórzy z nas mogą używać starszej wersji jquery.cookie.js, sprawdź kod źródłowy, czasami aktywny jest niewłaściwy plik.
Dexter,
Należy pamiętać, że spowoduje to powszechne traktowanie plików cookie jako JSON. W rezultacie ślepe dodawanie $cookie.json = truemoże powodować konflikty z innymi plikami cookie. Więc uważaj, używając tego w projekcie, który już używa plików cookie w innym miejscu!
Eric Tjossem
czy masz jakieś rozwiązanie dla złożonego json? mam tablicę json w moim json, która zawiera niektóre atrybuty json i ....
nasim jahednia
7

użyj, JSON.stringify(userData)aby zakryć obiekt json do ciągu.

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

i za wycofanie się z używania plików cookie JSON.parse()

var data=JSON.parse($.cookie("basket-data"))
X Men
źródło
4

Zapisywanie wartości zwracanej z JSON.stringify(userData)do pliku cookie nie jest dobrą praktyką ; może to prowadzić do błędu w niektórych przeglądarkach.

Przed użyciem należy przekonwertować go na base64 (używając btoa), a czytając go przekonwertować z base64 (używając atob).

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

write_cookie(val)
Eyal Ch
źródło
3
Czy masz odniesienie do przeglądarki, która ma z tym problem?
Marthin
1
Używam listy jsons jako pliku cookie w Chrome na platformie django. ma pewne problemy. Poza tym zawsze lepiej jest ukryć rzeczywiste dane przekazane przez plik cookie od użytkownika
Eyal Ch.
1
Po stronie serwera standardowa obsługa plików cookie w Pythonie odrzuci pliki cookie zawierające {lub }i dyskretnie usunie wszystkie pliki cookie, które następują po odrzuconym pliku cookie w nagłówku pliku cookie.
snakecharmerb
2

Z serializacją danych jako JSON i Base64, zależność 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
źródło
0

Wypróbuj ten: https://github.com/tantau-horia/jquery-SuperCookie

Szybkie użycie:

utwórz - utwórz plik cookie

sprawdź - sprawdź istnienie

weryfikuj - weryfikuj wartość cookie, jeśli JSON

check_index - sprawdź, czy indeks istnieje w JSON

read_values ​​- odczytaj wartość cookie jako ciąg znaków

read_JSON - odczytaj wartość cookie jako obiekt JSON

read_value - odczyt wartości indeksu przechowywanego w obiekcie JSON

replace_value - zastępuje wartość z określonego indeksu przechowywanego w obiekcie JSON

remove_value - usuwa wartość i indeks przechowywany w obiekcie JSON

Po prostu użyj:

$.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
źródło