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

Is it bad to store temporary data into hidden element?

本文关键字：是不是 元素 隐藏 数据 存储      更新时间：2023-09-26

在一次面试中，我被要求创建一个基于java脚本的功能，在这个功能中，我被要求创建一个表单(比如名字，姓氏，电子邮件，年龄)和一个列表(实际上列表是另一种存储多个条目的表单)。在提交此表单时，清单中添加了一个新行。但是，可以删除任何先前添加的清单行。并且在添加删除之后，最后需要存储这个清单的最终状态。(一种表单post和服务器端脚本进入图片)

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

在删除清单行时，我正在删除<tr>行以及同一行的各自隐藏元素。

一切正常，没有任何错误。但是面试官问我:"我使用的方法(隐藏元素)真的合适吗?"

我回答说，我可以使用json?但无法通过面试。所以我想知道在这种情况下，我们可以使用什么方法来存储数据?

客户端的另一种方法是单独保存对象列表，并仅将对每个项的引用存储在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);

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

多亏了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

我相信还有其他方法。

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

如果用户可以信任，那么在客户端存储数据并没有什么问题，并且当用户弄乱数据时也不会对您的系统造成严重影响。

唯一的问题，我可以看到使用隐藏字段(或cookie)是他们被发送与每个请求，这可能会浪费带宽。不确定这是否适用于你的情况，可能不适用，因为你说你只提交一次。

"刚刚好用"的解决方案的问题在于它们不够抽象，因此往往会在将来引起问题。想想你的例子;如果您决定将临时数据存储在本地存储器中(允许用户关闭浏览器并稍后返回)，则必须重写存储数据的方式。如果你把它存储在一个变量中，你就可以添加"保存到本地存储"，就像"提交到服务器"或"传递给任何其他函数"的功能一样容易。你的"隐藏元素"方法将不得不重写任何目的，除了张贴到服务。

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

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

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

如果另一个要求也在表中显示先前提交的数据，会发生什么?或者将表单放在单独的页面上?

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

我不会直接回答你的问题，我会把重点放在你选择的采访和方法上。

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

您选择了在客户端存储所有内容的方式，但您不应该这样做!由于您的客户端可能会以这种方式丢失大量数据，因为想象一下您的列表表单永远不会被发送的情况?用户会忘记点击发送(永远不要相信用户!)然后你失去了一切……你工作的全部进展……假设您已经添加了50个列表项…

也添加这样的项目可以很容易地使您的会话过期(没有请求到服务器)，没有数据将被保存，因为用户将不得不再次登录。你也必须处理好它，否则你会失去一切!

抱歉使用感叹号，但我认为数据是至关重要的(特别是对你的客户)，所以不要提供可能使客户丢失数据的解决方案。

:

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

相关文章：