title: How to mix AJAXy page updates with the Back button so that the updates are still there when the user returns?
body: <p>I have a page that the user can modify. All modifications are performed using JQuery, and also sent to the server, so that a full reload will produce the modified page too.</p>
  
  <p>This works fine in Firefox 11 / Chrome on Windows: even if the user navigates somewhere else and then uses the "Back" button, they get the page with their latest edits.</p>
  
  <p>However, if I now embed Google Maps onto the page, the Back button stops working: it takes the user to the page how it was before all their edits. This page doesn’t even exist anymore except in browser’s cache, and yet it gets displayed.</p>
  
  <p>I’ve put together a <strong>simple testcase</strong> <a href="http://bbb.akshell.com/working" rel="noreferrer">here</a> that shows this behaviour.</p>
  
  <p>What gives? How can I fix this? The perfect solution would just allow the browser to go Back without reloading the page, like it would do normally.</p>
  
  <p>P.S. Apparently the "working" example doesn’t actually work in Chrome on OSX either. How can I work around the browser’s insistence on going back to a stale version of the page?</p>
  
  <p><strong>Bug reports</strong> describing this behaviour: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=738599" rel="noreferrer">Firefox</a></p>
  
  <hr>
  
  <p><strong>Bounty</strong>: Firefox and Chrome on Windows exhibit <em>both</em> behaviours (going back to the modified DOM in one case, but unmodified in another). Is there a spec describing what the browser <em>should</em> do? Are there bugs filed to change this one way or another? Does this issue have a common name that I can google?</p>
  
  <p>I’m considering a solution whereby I update a hidden element via JavaScript, and then check if the update is still there. If so, the "Back" button restored up-to-date DOM, and nothing else needs to be done. If not, the browser restored outdated DOM, and I can just force a page reload, as unpleasant as that is. Any comments on this approach are also welcome.</p>
  
  <p><strong>Note</strong>: the real website has more editable controls than that, and one of them is a freeform text area. I would like the proposed solutions to work even if the user has just added several paragraphs of text. That kind of thing can’t be appended to the URL after the <code>#</code>, for example.</p>