在单击链接并按下Back按钮后持久化DOM更改

Persisting DOM changes after clicking a link and then pressing the Back button

本文关键字：按钮持久化 DOM 更改 Back 单击链接更新时间：2023-09-26

我使用jQuery的appendTo()方法将项目附加到无序列表中。当用户单击另一个链接，然后按下Back按钮时，附加的项就会消失。是否有一种方法可以使用JavaScript持久化这些更改?

当点击BACK时，一些浏览器会缓存上一个(最初加载的)页面。如果你可以重新加载页面，你可以使用cache-control 'no-store, no-cache, must-revalidate'来强制返回。

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

一旦用户离开页面，DOM就会被丢弃。当你的用户点击后退按钮时，他们会从你的服务器(或他们的缓存)获得一个新的HTML副本。

所以，你有两个选项之一:

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

你还必须通知浏览器你的历史记录状态已经改变。这可以通过HTML5的新History API来实现。在旧的浏览器中，你可以通过URL的哈希部分做类似的事情(尽管在旧版本的IE中，甚至不能工作)。然后，当用户单击后退按钮时，您将从变量…

重新加载该DOM。

不管怎样，这都太复杂了。你可能看错了。你想要完成什么?

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