按下后退/前进按钮时保持 DOM 上的更改

Question

我已经看到过类似的问题，例如：Ajax, back button and DOM updates，事实上，到目前为止，我所尝试的都是受到这些答案的启发。但是，他们都没有描述我在实际应用他们的建议时所面临的问题

这就是现在发生的事情：

• 页面 A 执行 ajax 调用，我将使用它来更新 DOM 上的元素“例如选择数量”
• 用户转到页面 B 并执行相同操作
• 用户点击返回按钮
• 页面 A 加载，但我对 DOM 所做的所有更改都丢失了
• 用户点击前进按钮
• 页面 B 显示，所有更改也丢失

到目前为止我尝试了什么： - 在 jQuery 的 ready 方法中重新加载数量。这行得通……尽管用户可以在几秒钟内看到旧数量。但是，它有一个很大的缺点，因为它复制了发送到服务器的调用量

• 在每次 ajax 调用后更新 window.location.hash 值。即

  window.location.hash = new Date().getTime();

这也有效，但问题是我必须单击两次后退按钮，因为第一次单击会重新加载当前页面。

任何想法如何解决这个问题？最后我想做的是保存 DOM 状态，以避免额外调用服务器来更新我的数量。

谢谢

Answer 1

如果您真的更改页面，是的，即使从缓存中工作，浏览器也会显示从服务器检索时的页面，而不是之后修改时的页面。

如果您想保持页面 A / 页面 B 结构的当前方式而不是切换到更多的 SPA 方法，您可以将 ajax 结果存储在 sessionStorage 并在页面加载时检查它。如果有，请重新申请；如果没有，请通过 ajax 请求并应用它（并保存它）。这将比通过网络重新请求要快得多。