title: Refresh a page using history.pushState() without losing the state
body: <p>I've already searched this topic over and over but I cannot find a solution. I am trying to create a kind of single page application using Ajax to load content from other pages. Everything works fine:</p>
  
  <ul>
  <li>the content <code>from page b is loaded into page a</code></li>
  <li>The url changes via <code>history.pushState()</code> </li>
  <li>The go back and forward buttons of the browser work great using the <code>popstate event</code> </li>
  </ul>
  
  <p>I am also doing some animations with jQuery UI animation, like moving a piece of content from one place to the other:</p>
  
  <p>Fig.1</p>
  
  <p><a href="https://i.stack.imgur.com/a14uQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a14uQ.png" alt="Fig.1"></a></p>
  
  <p>Fig.2</p>
  
  <p><a href="https://i.stack.imgur.com/yObSW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yObSW.png" alt="Fig.2"></a></p>
  
  <p>Fig.3</p>
  
  <p><a href="https://i.stack.imgur.com/X3K5A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X3K5A.png" alt="Fig.3"></a></p>
  
  <p>The problem is that when refreshing the page, let's say <code>page b</code>, everything I worked on is lost and all it appears is the static content from b (of course:)).</p>
  
  <p>My question: Is there a way of refreshing <code>page b</code> without losing the state of of the <code>page a</code> (fake <code>page b</code>) loaded with ajax? I mean, a way of making the 'real' <code>page b</code> display exactly like <code>Fig.2</code> after refreshing?
  Or I am asking the impossible?</p>