jQuery .data() append

Question

Таков мой сценарий: у меня есть несколько вопросов, на которые пользователь отвечает, и я хочу сохранить их, чтобы в конце анкеты я мог составить список каждого вопроса и ответа. Очевидно, я мог бы использовать глобальную переменную, но проблема в том, что на сайте есть и другие анкеты. Мое решение состоит в том, чтобы пойти с JQuery's .data(), Моя проблема в том, что, когда я пытаюсь добавить похожие данные, они перезаписывают предыдущие. Вот простой пример:

<div id="test"></div>

$("#test").data({name:"foo",answer:"bar"});
$("#test").data({name:"john",answer:"doe"});

console.log($("#test").data()); //logs name:"john",answer:"doe"

Как я могу получить это, чтобы сохранить обе ценности?

Answer 1

Вы перезаписываете предыдущие данные, добавляете обе записи в один вызов в массиве.

Live Demo

$("#test").data([{name:"foo",answer:"bar"}, {name:"john",answer:"doe"}]);

Доступ к данным, как массив,

alert($("#test").data()[0].name);
alert($("#test").data()[1].name);

Редактируйте на основе комментариев, если вы хотите добавлять записи в данные одну за другой, вы можете использовать пару ключ-значение.

Live Demo

$("#test").data("1", {name:"foo",answer:"bar"});
$("#test").data("2", {name:"john",answer:"doe"});

Как указал @Heart, если эти данные важны, хранение на клиенте открыто для клиента и может быть изменено. Использование ssl и публикация его по мере получения от пользователя может спасти от несанкционированной защиты данных.

Answer 2

Почему бы вам не попробовать добавить их с key?

$("#test").data("Answer1", {
    name: "foo",
    answer: "bar"
});
$("#test").data("Answer2", {
    name: "john",
    answer: "doe"
});

console.log($("#test").data());
/*
//Console Output
 [object Object] {
   Answer1: [object Object] {
     answer: "bar",
     name: "foo"
   },
   Answer2: [object Object] {
     answer: "doe",
     name: "john"
   }
  }
*/

Таким образом, ваши объекты будут уникальными.

Демо: http://jsbin.com/ixuqal/1/edit

Answer 3

Я думаю, что самым простым решением было бы сначала получить данные из элемента, сохранить их в переменной, добавить новые данные, а затем повторно добавить данные в элемент.

var data = [];
//get your existing data
data.push($("#test").data());
//add your new data
data.push({name:"john",answer:"doe"});
$("#test").data(data);