javascript - 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

你为什么不尝试用 a 添加它们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);