将临时数据存储到隐藏元素中是不是很糟糕？

Question

在一次采访中,一旦我参加,我被要求创建一个基于java脚本的功能,据说我创建了一个表单(比如名字,姓氏,电子邮件,年龄)和一个列表(实际列表是另一种在此表单下方存储多个条目的表单.在提交此表单时,列表中添加了一个新行.但是,可以删除任何以前添加的列表行.并且在添加删除后,最后需要存储此最终列表状态.(形式帖子和服务器端脚本的种类进入图片)

所以我做了什么,在表单提交,<tr>在列表中添加一个新行同时我使用jQuery序列化序列化所有表单数据除了提交按钮并将其存储在列表表单的一个隐藏元素中.

在删除列表行时,我正在删除<tr>行以及相同行的相应隐藏元素.

一切都很好,没有任何错误.但是面试官问我"我使用的方法(隐藏的元素)真的很合适吗？"

我回答说,我本可以用json？但无法破解采访.所以我想知道在这种情况下我们可以用来存储数据的最佳方法是什么？

Answer 1

感谢HTML5,我们现在能够在所有HTML元素上嵌入自定义数据属性.这些新的自定义数据属性由两部分组成:

• 属性名称 数据属性名称必须至少为一个字符长,并且必须以"data-"为前缀.它不应包含任何大写字母.
• 属性值 属性值可以是任何字符串.

使用此语法,我们可以将应用程序数据添加到我们的标记中,如下所示:

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul> 

我们现在可以在我们网站的JavaScript中使用这些存储的数据来创建更丰富,更具吸引力的用户体验.想象一下,当用户点击蔬菜时,在浏览器中打开一个新图层,显示额外的种子间距和播种说明.由于我们已经添加到<li>元素中的数据属性,我们现在可以立即显示此信息,而无需担心进行任何Ajax调用,也无需进行任何服务器端数据库查询.

来源:HTML5医生

我相信还有其他方法.

Answer 2

客户端的另一种方法是单独保留对象列表,并仅将对DOM元素属性内每个项的引用存储起来.这种方法与jQuery $.fn.data()提供的方法非常相似,具有以下优点:

1. 您不必序列化任何内容,数据保持其原生格式; 应该说你可以通过添加属性来实现这一点.

2. 您的所有数据都保存在一个地方,而不是分散在DOM中.

这是一个示例实现:

(function(ns) {

var entries = {},
entryId = 1;

ns.Entries = {
   addEntry: function(data) {
     entries[entryId] = data;
     return entryId++;
   },
   getEntryById: function(id) {
     return entries[id] || null;
   }
};

}(this));

调用Entries.addEntry返回一个标识符,您可以将其存储在DOM元素的某个属性中:

tr.entryId = Entries.addEntry(data);

稍后您可以使用该entryId属性在条目列表中查找相应的数据并使用它.

var data = Entries.getEntryById(tr.entryId);

演示

当然,这个特定的功能也可以通过使用会话在服务器端解决.