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

Question

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

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

任何人都可以向我建议一种防止这种情况发生的方法。

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

提前致谢;)

Answer 1

您在这里谈论的是持久变量。您可以通过 3 种方式完成，其中 2 种您已经放弃。

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

我真的不明白为什么在你的情况下需要固定元素的数量，它是否真的无关紧要。您可以保存数据，在不需要时将其丢弃并创建新数据。

编辑:

我明白了。就个人而言，我会为此目的使用 localStorage(除非包含一些敏感数据，例如银行帐户信息和类似内容)。

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

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

当用户最终完成数据处理后，您只需将其删除 (localStorage.removeItem(data))。

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