jQuery .data() append

jQuery .data() append

本文关键字：append data jQuery      更新时间：2023-09-26

这就是我的场景：我有一些问题是用户回答的，我想把它们存储起来，这样在问卷的末尾我就可以呈现每个问题和答案的列表。很明显，我可以选择一个全局变量，但问题是网站上还有其他问卷。我的解决方案是使用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"

我怎样才能让它保持这两个值？

您正在重写以前的数据，请在数组中的单个调用中添加这两条记录。

实时演示

$("#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并在从用户那里获得它时将其发布，可以避免数据安全性被破坏。

为什么不尝试用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

我认为这是添加新数据的最简单的解决方案：

  • 首先从元素中获取数据
  • 将其存储在变量中
  • 附加您的新数据
  • 然后将数据重新添加到元素
    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);
相关文章：