如何在页面刷新后保留动态创建的html元素及其数据/值

how to retain dynamically created html elements and its data/values after page refresh

本文关键字：元素 html 数据 创建 动态 刷新 保留      更新时间：2023-09-26

我有一个html页面，在该页面上，我使用javascript（使用createElement）单击按钮即可在页面上动态添加新元素（如输入和按钮）。然后我在这些元素中输入一些值。但在刷新页面时，我发现所有新创建的html元素及其相关数据都已从页面中删除。

当我转到另一个页面并返回到原始页面时，这些元素也会被删除。

有人能给我建议一种防止这种情况发生的方法吗。

我在网上查了一下，发现了一些使用cookie和ajax的方法。但这里的问题是元素的数量不是固定的，所以我不能应用这些方法。

提前感谢；）

您在这里谈论的是持久变量。你可以用三种方法，其中两种你已经放弃了。

  • 1） 使用AJAX从服务器存储中提取数据
  • 2） 在cookie中动态保存数据并从中提取数据
  • 3） 使用浏览器的localStorage

我真的不明白为什么在你的情况下需要固定元素的数量，不管是不是。您可以保存数据，在不需要时丢弃数据，然后创建新数据。

编辑：

我明白了。就我个人而言，我会使用localStorage（除非其中包含一些敏感数据，例如银行账户信息和类似的东西）。

在显示表单的页面加载中，您可以立即调用一个方法来获取localStorage中的现有数据对象，例如localStorage.getItem(data)。

如果它不存在，则绑定.submit()表单事件，以便它使用.serialize()或其他方法获取表单的所有数据，将该数据（localStorage.setItem(data, dataObject)）保存在localStorage中，然后在下一页上再次提取。如果用户返回，您将以同样的方式再次提取数据。

当用户最终处理完数据时，只需将其删除即可（localStorage.removeItem(data)).

再编辑一次：如果您正在向页面动态添加（像您所做的那样）元素，这将不起作用。理论上，如果您能够以某种方式将创建的元素本身存储在localStorage中，转换它们并将它们再次添加到页面中（因为localStorage和cookie只能保留字符串），那么它就可以工作。从未尝试过，但在任何情况下，您都需要创建自己的元素和数据解析器方法。

相关文章：