按后退/前进按钮时，保持对DOM的更改

Question

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

这就是现在正在发生的事情：

• 页面A执行ajax调用，我将使用该调用来更新DOM上所选数量的元素，例如＆＃39;
• 用户转到第B页并执行相同的操作
• 用户点击后退按钮
• 页面A加载，但我在DOM上所做的所有更改都将丢失
• 用户点击前进按钮
• 页面B显示并且所有更改也都丢失了

到目前为止我尝试了什么： - 在jQuery的ready方法上重新加载数量。这有效...虽然用户可以看到旧数量的几秒钟。但是，它有一个很大的缺点，因为它重复了发送到服务器的调用量

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

  window.location.hash = new Date（）。getTime（）;

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

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

由于

Answer 1

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

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