jQuery .data() 追加

Question

所以这就是我的场景：我有几个问题需要用户回答，我想将它们存储起来，以便在调查问卷的末尾我可以呈现每个问题和答案的列表。 显然我可以使用全局变量，但问题是网站上还有其他问卷。 我的解决方案是使用 jQuery 的.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

您正在写入先前的数据，将两个记录添加到数组中的单个调用中。

现场演示

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

访问数组等数据，

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

根据评论进行编辑，如果您想将记录一条一条地添加到数据中，您可以使用键值对。

现场演示

$("#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 myData = [];

    //get your existing data
    myData.push($("#testID").data());

    //append your new data
    myData.push({fname:"john",lname:"doe"});

    //update element
    $("#testID").data(myData);