jquery зберегти об'єкт даних json у файлі cookie


108

Як зберегти дані JSON у файлі cookie?

Мої дані JSON виглядають приблизно так

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

І я хочу зробити щось подібне

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

і для отримання даних, які я хочу завантажити в $("#ArticlesHolder")ніби

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

хтось знає, чи я на вірному шляху чи це потрібно зробити якимось іншим способом? Простіше кажучи, як я можу вставити та витягнути дані json з файлу cookie?


8
Просто педантичний, але у вашому питанні немає "даних JSON". У вас є деякі об’єкти JavaScript, які ви визначили за допомогою буквеної нотації об'єктів (не JSON, JSON - це підмножина нотацій літеральної позначки об'єкта), але JSON там немає. json.org Однак ви майже напевно хочете використовувати JSON як формат даних для зберігання об'єктів у рядку файлів cookie.
— TJ Crowder

Відповіді:


195

Ви можете серіалізувати дані як JSON, як це:

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

Потім, щоб отримати його з файлу cookie:

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

Це покладається на JSON.stringify()таJSON.parse() серіалізує / десериалізує ваш об’єкт даних, для старих браузерів (IE <8) включіть json2.js для отримання JSONфункціональності. У цьому прикладі використовується плагін cookie jQuery


2
JSON заборонено використовувати файли cookie для Opera з давніх часів my.opera.com/community/forums/… У мене також є ця помилка. Хоча якщо @ cookie @ плагін використовує @ encodeURIComponent @, pbug не повинен з’являтися.
— kirilloid

1
Це запитання та відповідь приводять мене до думки, що cookieце вбудована функція в jQuery. Здається, це не так. чи це застаріле ..? якщо це плагіни, які я знайду, посилання на нього було б чудово уникнути плутанини ...
— TJ

1
@TJ Це дійсно плагін, плагін cookie jQuery. Ви можете знайти його тут: plugins.jquery.com/cookie Мені дуже цікаво, чому це не в основному на даний момент ...
— Nick Craver

Будьте обережні, використовуючи це в деяких браузерах. Символ ,(кома) може призвести до неправильного встановлення файлів cookie у сафарі та інших браузерах.
— Метт Сеймур

Ви також можете використовувати цю чудову легку бібліотеку файлів cookie, якщо jQuery не потрібна. [ developer.mozilla.org/en-US/docs/Web/API/document/cookie] lib
— RyBolt

40

Тепер вже немає необхідності використовувати JSON.stringifyявно. Просто виконайте цей рядок коду

$.cookie.json = true;

Після цього ви можете зберегти будь-який об’єкт у файлі cookie, який буде автоматично перетворений в JSON і назад з JSON при читанні файлів cookie.

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

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

Але бібліотека JSON не постачається з jquery.cookie, тому її потрібно завантажити самостійно і включити на сторінку html перед jquery.cookie.js


3
Я спробував цей підхід без $ .cookie.json = true і отримав [object object] як моє значення cookie. Потім встановіть його на true та спробували передати об’єкт безпосередньо до файлу cookie, і жодне cookie не було заповнене.
— JacobRossDev

@ jacobross85 Я думаю, що можливо, що хтось із нас може використовувати старішу версію jquery.cookie.js, будь ласка, перевірте вихідний код, іноді активний неправильний файл.
— Декстер

Зверніть увагу, що це призведе до того, що файли cookie будуть сприйматися як JSON. Як результат, сліпе додавання $cookie.json = trueможе спричинити конфлікти з іншими файлами cookie. Тому будьте обережні, використовуючи це для проекту, який вже використовує файли cookie в іншому місці!
— Ерік Тьосем

у вас є рішення для складного json? У мене в json є масив json, який містить деякі атрибути json та ....
— nasim jahednia

7

використовувати JSON.stringify(userData)для прив'язки об'єкта json до рядка.

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

і для повернення від використання файлів cookie JSON.parse()

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

4

Недоцільно зберігати значення, яке повертається з JSON.stringify(userData)файлу cookie; це може призвести до помилок у деяких браузерах.

Перш ніж використовувати його, слід перетворити його на base64 (за допомогою btoa), а під час читання - перетворити з base64 (за допомогою atob).

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

write_cookie(val)

3
Чи є у вас посилання на браузер, який має проблеми з цим?
— Marthin

1
Я використовую список jsons як cookie on chrome на платформі django. це має деякі проблеми. також завжди краще приховати фактичні дані, передані файлом cookie від користувача
— Eyal Ch

1
Що стосується сервера, стандартне керування файлами файлів Python буде відхиляти файли cookie, що містять {або }, і мовчки відкидає будь-які файли cookie, які слідують за відхиленим файлом cookie у заголовку файлів cookie.
— snakecharmerb

2

З серіалізацією даних як JSON та Base64, залежність 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

Спробуйте це: https://github.com/tantau-horia/jquery-SuperCookie

Швидке використання:

create - створити cookie

check - перевірити існування

verify - перевірити значення файлу cookie, якщо JSON

check_index - перевірте, чи існує індекс у JSON

read_values ​​- читати значення файлу cookie як рядок

read_JSON - читати значення файлу cookie як об’єкт JSON

read_value - значення зчитування індексу, що зберігається в об'єкті JSON

substitu_value - замінити значення з вказаного індексу, що зберігається в об'єкті JSON

remove_value - видалити значення та індекс, що зберігаються в об'єкті JSON

Просто використовуйте:

$.super_cookie().create("name_of_the_cookie",name_field_1:"value1",name_field_2:"value2"});
$.super_cookie().read_json("name_of_the_cookie");
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.