单击链接然后按返回按钮后持久性 DOM 更改答案

【问题标题】：Persisting DOM changes after clicking a link and then pressing the Back button单击链接然后按返回按钮后持久性 DOM 更改
【发布时间】：2013-11-17 07:52:45
【问题描述】：

我正在使用 jQuery 的 appendTo() 方法将项目附加到无序列表中。当用户单击另一个链接，然后按“返回”按钮时，附加的项目就会消失。有没有办法使用 JavaScript 持久化这些更改？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

点击 BACK 时，某些浏览器会缓存上一个（最初加载的）页面。如果您可以通过重新加载重新生成页面，则可以使用 cache-control 'no-store, no-cache, must-revalidate' 来强制返回。

Chrome 想要无存储，而 IE 想要必须重新验证。对于其他浏览器（和 w3c），无缓存就足够了。

【讨论】：

【解决方案2】：

一旦您的用户离开您的页面，DOM 就会被丢弃。当您的用户点击后退按钮时，他们会从您的服务器（或从他们的缓存中）获取 HTML 的新副本。

所以，您有以下两种选择之一：

正确的方法是将 DOM 状态保存在 cookie（或会话）中，然后在页面加载时检查该 cookie 是否存在，如果存在，附加该信息。
李>
由于您没有提供足够的信息，我不确定您要完成什么。因此，如果 cookie 不够好，您可能必须将点击事件附加到链接，而不是将它们发送到该链接，您将首先将 DOM 存储在变量 var theDOM = $('html').clone(true); 中，然后加载在带有 AJAX 请求的链接的 HTML 中。

您还必须通知浏览器您的历史状态已更改。这可以通过 HTML5 的新 History API 来实现。在较旧的浏览器中，您可以通过 URL 的哈希部分执行类似的操作（尽管在旧版本的 IE 中即使这样也行不通）。然后，当用户单击后退按钮时，您将从变量中重新加载该 DOM...

不管怎样，这太复杂了。您可能以错误的方式看待这个问题。你想完成什么？

【讨论】：

基本上，我正在尝试实现 SO 或 Facebook 已经在做的事情，在不重新加载页面的情况下添加 cmets。评论已经保存在数据库中，所以我应该在按下后退按钮后强制页面重新加载吗？
我刚刚检查过这里，同样的问题也发生在 SO 中，所以也许这是我不应该解决的问题？只是为了澄清，添加对此问题的评论，导航到另一个页面，按返回按钮。评论将消失。不过，按 F5 会刷新带有评论的页面。
这完全取决于您的应用程序。如果更新的信息对任务至关重要，那么是的，您应该强制刷新页面（或使用 AJAX 请求仅获取所需的数据）。但大多数时候，这只是网络的工作方式。用户已经习惯了这种行为......

【解决方案3】：

如果您使用iframe 没有任何问题，那么您可以使用它来保存以前的数据。在iframe load 事件上编写一个 js 代码，该代码将在其中获取保留的数据并将其附加到所需的元素。这样，当您导航到下一页并按下返回按钮时，iframe 将加载，然后加载事件处理程序将完成其工作，

【讨论】：

感谢您的建议。我认为 iframe 会使事情进一步复杂化。我认为这实际上是一个常见（可能不是很重要）的问题 - 请参阅我对上一个答案的评论。
另一种选择是在页面加载时进行 ajax 调用并仅获取所需的数据。
嗯，这也是个好建议。我必须检查当用户按下后退按钮时触发了哪些事件。你知道 $(document).ready() 是否被解雇了吗？