动态 dom 操作后如何在浏览器历史记录中保留 dom 状态？答案

【问题标题】：How do I preserve dom state in the browser history after dynamic dom manipulation?动态 dom 操作后如何在浏览器历史记录中保留 dom 状态？
【发布时间】：2023-04-07 10:58:01
【问题描述】：

是否有一种通用的解决方案来保留 dom 状态，以便当用户使用后退/前进返回页面时，整个页面都处于他们离开时的状态？

这篇文章询问并回答了为什么该行为与不同的浏览器和不同的javascript库不一致...

Ajax, back button and DOM updates

...但我很好奇是否有人对此问题有一个不需要重新加载页面的通用解决方案。

【问题讨论】：

标签： javascript browser-history

【解决方案1】：

恐怕没有，而且真的不可能，因为我们谈论的是完全自行决定的浏览器行为，而不是标准定义的。您可以使用 Ajax 积极地将相关 DOM 状态同步到服务器上的会话，并始终在页面加载时从该状态恢复，但这将保留该页面的最新状态，而不是必须出现在浏览器历史记录中给定的期望点。

【讨论】：

哇，这似乎是很多人的普遍问题。也许我会在卸载期间将状态保存到服务器，这样我就可以确保获得最新的更改。我真希望所有浏览器的行为都像 FF 3+ 一样，并且在这方面做了正确的事情。
是的，Firefox 得一分。

【解决方案2】：

您可以在 Rails 中使用这种缓存清除技术，使其在现代浏览器（chrome、ie8+、ff 3.5+）中运行。当我们让 ajax 更新 dom 并且必须导航回来并让 ajax 更新持续存在时，这对我的上一个项目很有用。

response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
response.headers["Pragma"] = "no-cache"
response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"

【讨论】：