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 Doctor

我也相信其他方法。

Answer 2

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

您不必序列化任何内容，数据保持其原生格式;应该说你可以通过添加一个属性来实现这一点。
您的所有数据都保存在一个地方，而不是分散在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);

Demo

当然，通过使用会话，也可以在服务器端解决此特定功能。

Answer 3

实际上，您可以使用jQuery将数据添加到html元素，而不是使用隐藏元素。这是一种更好的方法，可以使您的数据不那么明显/直接对用户。检查jQuery中的data（）。

Answer 4

如果用户可以信任它，那么在客户端存储数据没有任何问题，当你的系统混乱时，系统不会发生任何可怕的事情。

我只能看到使用隐藏字段（或cookie）的问题是它们随每个请求一起发送，这可能会浪费带宽。不确定这是否适用于你的情况，可能不适用，因为你说你只需提交一次就完成了。

Answer 5

“正常工作”解决方案的问题在于它们不够抽象，因此往往会导致问题。考虑你的例子;如果您决定将临时数据存储在本地存储中（以允许用户关闭浏览器并稍后返回），则必须重写存储数据的方式。如果将其存储在变量中，您就可以像“提交到服务器”或“传递给任何其他功能”功能一样轻松添加“保存到本地存储”。除了发布到服务之外，您的“隐藏元素”方法必须为任何目的进行重写。

Answer 6

首先，一个页面上的多个表单是错误的 - 它是数据丢失反模式。正确的方法是将所有东西都放在一个表格中。这样，即使没有JS，它也可以工作，你只能使用JS来提高可用性，而不是提供基本功能。该解决方案会优雅地降级，并且易于调试和维护。

当然，将数据保存在隐藏字段中是一种有效的技术。

Answer 7

通过将提交的数据写入表单本身并再次从中读取，您将这两个元素绑定在一起 - 据说它们是紧密耦合的。

如果另外一项要求出现在表格中显示先前提交的数据，会发生什么字？或者将表单放在单独的页面上？

如果你采用更多的MVC方法，你可以分离出各个部分的逻辑 - 读取，写入和发送数据。例如，正如您所说，从JSON模型编写和读取。这将使每个方面在未来更容易扩展。

Answer 8

我不会直接回答您的问题，而是会专注于您选择的面试和方法。

我会说你选择了错误的方式和知名的IT公司你应用这个解决方案可能有问题。

您选择了将所有内容存储在客户端的方式，但您不应该这样做！由于您的客户可能会以这种方式丢失大量数据，因此想象您的列表表单永远不会被发送的情况？用户只会忘记点击发送（永远不要信任用户！）。那么你就失去了一切......你工作的全部进展......让我们说你已经添加了50个上市项目......

同样添加这样的项目可以轻松使您的会话过期（不向服务器发出请求）并且不会保存任何数据，因为用户必须再次登录。你也必须处理它，否则你将失去一切！

抱歉感叹号，但我认为数据至关重要（特别是对您的客户而言），所以不要提供可以让客户以某种方式丢失数据的解决方案。

所以：

将数据存储在HTML元素中并不坏，但您需要非常小心地应用此解决方案。

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

8 个答案: