javascript - 如何记录用户操作然后在 JavaScript 中重新执行它们？

Question

我有一个网页(全部在客户端代码中完成)，用户可以在其中通过不同的按钮动态添加某些页面元素。

例如，他们可以单击名为“添加组”的按钮并输入组名。这将创建一个 <div class="customGroup">将组显示为其他一些按钮中的“标题”，这些按钮允许他们在新创建的 <div> 中添加更多元素。 .

我希望能够存储用户所做的事情，并且不会在他们执行诸如关闭并重新打开窗口或重新加载页面之类的操作时丢失。因此，例如，如果他们添加一个组“Foo”并刷新页面，假设该页面全是 HTML/JavaScript，则“Foo”会丢失。

有什么方法可以记录他们的操作并使用缓存/cookie 重新执行它们？或者我需要以其他方式进行吗？这可能吗？

Answer 1

我建议使用 localstorage在窗口打开和关闭时保留这些数据。

您可以通过附加 event listener 来了解用户点击了什么到你关心的元素。您传入的函数可以通过将点击的项目推送到数组来保留对点击项目的引用。然后当你想使用 .click() 时可以点击它们.

至于用户在提交数据时输入的文本，请确保其作为字符串存储在本地存储中。在页面加载时，您可以将此数据放在任何您想要的位置，因此将其提供给一个元素 innerHTML 瞧，您可以重建页面状态。