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

Question

我有一个html页面，我只需点击一下按钮就可以使用javascript（使用createElement）在页面上动态添加新元素（如输入和按钮）。然后我在这些元素中输入一些值。但是在刷新页面时，我发现所有新创建的html元素都会从页面中删除，并附带相关数据。

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

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

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

提前致谢;）

Answer 1

你在这里谈论持久性变量。你可以用3种方式做到，其中2种你已经丢弃了。

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

我无法理解为什么在你的情况下需要修复元素的数量，它是否真的无关紧要。您可以保存数据，在不需要时将其丢弃并创建一个新数据。

编辑：

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

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

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

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

还有一个编辑： 如果您正在向页面动态添加（就像您一样）元素，这将无效。理论上，如果你能够以某种方式将创建的元素本身存储在localStorage中，转换它们并将它们再次添加到页面中（因为localStorage和cookie只能保留字符串）。从来没有尝试过，但无论如何，你需要制作自己的元素和数据解析器方法。