jquery menyimpan objek data json dalam cookie

108

Bagaimana cara menyimpan data JSON dalam cookie?

Data JSON saya terlihat seperti ini

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

Dan saya ingin melakukan sesuatu seperti

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

dan untuk mengambil data saya ingin memuatnya ke dalam $("#ArticlesHolder")like

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

apakah ada yang tahu apakah saya berada di jalur yang benar atau haruskah ini dilakukan dengan cara lain? Sederhananya, bagaimana cara menempatkan dan menarik data json dari cookie?

Marthin
sumber
8
Hanya bertele-tele, tetapi tidak ada "data JSON" dalam pertanyaan Anda. Anda memiliki beberapa objek JavaScript yang telah Anda tentukan melalui notasi literal objek (bukan JSON, JSON adalah subset dari notasi literal objek), tetapi tidak ada JSON di sana. json.org Anda hampir pasti ingin menggunakan JSON sebagai format data untuk menyimpan objek Anda dalam string cookie.
TJ Crowder

Jawaban:

195

Anda dapat membuat serial data sebagai JSON, seperti ini:

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

Kemudian untuk mendapatkannya dari cookie:

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

Ini bergantung pada JSON.stringify()danJSON.parse() untuk membuat serial / deserialisasi objek data Anda, untuk browser yang lebih lama (IE <8) termasuk json2.js untuk mendapatkan JSONfungsionalitasnya. Contoh ini menggunakan plugin cookie jQuery

Nick Craver
sumber
2
JSON tidak diizinkan di cookie untuk Opera sejak zaman kuno my.opera.com/community/forums/… Saya juga mengalami kesalahan ini. Meskipun @ cookie @ plugin menggunakan @ encodeURIComponent @, pbug tidak akan muncul.
Kirilloid
1
Pertanyaan dan jawaban ini membuat saya percaya bahwa itu cookieadalah fungsi bawaan di jQuery. Sepertinya tidak. atau sudah usang ..? jika itu adalah plugin yang saya temukan, menautkan ke itu akan sangat bagus untuk menghindari kebingungan ...
TJ
1
@TJ Ini memang sebuah plugin, plugin cookie jQuery. Anda dapat menemukannya di sini: plugins.jquery.com/cookie Saya benar-benar bertanya-tanya mengapa tidak ada pada inti saat ini ...
Nick Craver
Berhati-hatilah saat menggunakannya di beberapa browser. Karakter ,(koma) dapat menyebabkan cookie tidak disetel dengan benar dalam safari dan browser lain.
Matt Seymour
Anda juga dapat menggunakan pustaka cookie ringan yang hebat ini jika jQuery tidak diinginkan. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
RyBolt
40

Sekarang sudah tidak perlu menggunakan JSON.stringifysecara eksplisit. Jalankan saja baris kode ini

$.cookie.json = true;

Setelah itu Anda dapat menyimpan objek apa pun dalam cookie, yang akan secara otomatis diubah menjadi JSON dan kembali dari JSON saat membaca cookie.

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

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

Namun library JSON tidak disertakan dengan jquery.cookie, jadi Anda harus mendownloadnya sendiri dan memasukkannya ke halaman html sebelum jquery.cookie.js

Vitalii Korsakov
sumber
3
Saya mencoba pendekatan ini tanpa $ .cookie.json = true dan mendapatkan [objek objek] sebagai nilai cookie saya. Kemudian setel ke true dan mencoba meneruskan objek langsung ke cookie dan tidak ada cookie yang diisi.
JacobRossDev
@ jacobross85 Saya rasa ada kemungkinan bahwa beberapa dari kita mungkin menggunakan versi jquery.cookie.js yang lebih lama, silakan periksa kode sumbernya, terkadang file yang salah aktif.
Dexter
Harap dicatat bahwa ini akan menyebabkan cookie diperlakukan secara universal sebagai JSON. Akibatnya, menambahkan secara membabi buta $cookie.json = truedapat menyebabkan konflik dengan cookie Anda yang lain. Jadi berhati-hatilah saat menggunakan ini pada proyek yang sudah menggunakan cookie di tempat lain!
Eric Tjossem
apakah Anda punya solusi untuk json kompleks? saya memiliki array json di json saya yang beberapa atribut berisi json dan ....
nasim jahednia
7

gunakan JSON.stringify(userData)untuk menutupi objek json ke string.

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

dan untuk kembali dari penggunaan cookie JSON.parse()

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

Bukan praktik yang baik untuk menyimpan nilai yang dikembalikan dari JSON.stringify(userData)ke cookie; ini dapat menyebabkan bug di beberapa browser.

Sebelum menggunakannya, Anda harus mengubahnya menjadi base64 (menggunakan btoa), dan saat membacanya, konversikan dari base64 (menggunakan atob).

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

write_cookie(val)
Eyal Ch
sumber
3
Apakah Anda memiliki referensi ke browser yang bermasalah dengan ini?
Marthin
1
saya menggunakan daftar jsons sebagai cookie di chrome pada platform django. ini memiliki beberapa masalah. juga, selalu lebih baik untuk menyembunyikan data aktual yang dikirimkan oleh cookie dari pengguna
Eyal Ch
1
Di sisi server, penanganan cookie standar Python akan menolak cookie yang mengandung {atau }, dan diam-diam melepaskan cookie apa pun yang mengikuti cookie yang ditolak di header cookie.
snakecharmerb
2

Dengan membuat data menjadi serial sebagai JSON dan Base64, ketergantungan 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
sumber
0

Coba yang ini: https://github.com/tantau-horia/jquery-SuperCookie

Penggunaan Cepat:

buat - buat cookie

periksa - periksa keberadaan

verifikasi - verifikasi nilai cookie jika JSON

check_index - verifikasi jika indeks ada di JSON

read_values ​​- membaca nilai cookie sebagai string

read_JSON - membaca nilai cookie sebagai objek JSON

read_value - membaca nilai indeks yang disimpan dalam objek JSON

replace_value - ganti nilai dari indeks tertentu yang disimpan di objek JSON

remove_value - hapus nilai dan indeks yang disimpan di objek JSON

Gunakan saja:

$.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
sumber