按后退/前进按钮时，保持对DOM的更改 [英] Keep changes on DOM when pressing back/forward buttons

问题描述

我已经看过类似的问题： Ajax，后退按钮和DOM更新，事实上，到目前为止我所尝试的是受到那些答案的启发。但是，没有一个描述我在实际应用他们的建议时遇到的问题

I have already seen similar questions like: Ajax, back button and DOM updates, and in fact, what I tried so far is inspired by the answers on those. However, none of them describe the problem I'm facing when actually applying their suggestions

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

This is what is happening right now:

• 页面A执行ajax调用，我将用它来更新DOM所选数量的元素，例如'


• 用户转到第B页并执行相同的操作


• 用户单击后退按钮


• 页面A加载但我在DOM上所做的所有更改都将丢失


• 用户点击前进按钮


• 页面B显示并且所有更改都会丢失

• Page A performs an ajax call which I will use to update elements on the DOM 'chosen quantity for example'
• User goes to Page B and does the same
• User clicks the back button
• Page A loads but all the changes I did on the DOM are lost
• User clicks the forward button
• Page B shows and all the changes are lost as well

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

What I tried so far: - Reload the quantities on jQuery's ready method. This works... although the user can see for a few seconds the old quantities. However, it has a big downside because it duplicates the amounts of calls sent to the server

• 更新window.location.hash每次ajax调用后的值。 IE

• Update the window.location.hash value after each ajax call. I.E

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

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

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

This also works, but the problem is that I have to click the back button twice instead because the first click reloads the current page.

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

Any ideas how to fix this? What I want to do in the ends is conserve the DOM state in order to avoid extra calls to server in order to update my quantities.

谢谢

推荐答案

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

If you're really changing pages, the yes, even if working from cache the browser will show the page as it was when retrieved from the server, not as it was when modified afterward.

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

If you want to keep the Page A / Page B structure the way it currently is rather than swapping over to a more SPA approach, you could store the ajax result in sessionStorage and check for it on page load. If there, reapply it; if not, request via ajax and apply it (and save it). That will be much faster than re-requesting it across the network.

这篇关于按后退/前进按钮时，保持对DOM的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！