Bfcache detection function?

Question

I was surprised by this problem in IE10 when using the back button to go to the page whose DOM was changed:

I would be pleased with either the behavior of 1 or 2, but not 3:

• correctly restore all state (for example, FF and Chrome)
• reload the page (since it should not be cached), and the current state can be recreated because the changes were transferred to the server via Ajax (IE8 does this)
• but IE10 returned to the original, unmodified page (it retains the form input if there is some, but not all, state on the initial page)

As I was in a hurry, I just started to force it to reload if someone accesses the page after making changes to the DOM (this part of the information is stored in a hash), which is a pretty dumb solution (FF and Chrome don't need to reload, but now do it).

One suggestion was to use localStorage to remember the state , and I assume that this kind of function also translates to history.js .

To keep a backup copy lying around for comparison / in case the state is not restored, it seems unnecessary, especially because in our case it is a problem that could affect, perhaps, 0.01% of users. For my purposes, it would be sufficient to force a reboot if the state was not fully saved in bfcache.

Can I simply determine if bfcache exists covering all the states? If so, can I force his absence to reload when someone returns to the page whose DOM has been changed?

Answer 1

You can refresh the page if it is known that the user agent / browser browser does not save the changed state.

Alternatively, you can add “#modified” to the URL after the state changes, so if the URL contains “# moded” but the default state, you know you need to refresh the page because the state is not cached correctly .

if(document.location.hash == "#HelloWorld") { // Check if state is default // If state is default, the page should be refreshed } document.location.hash = "#HelloWorld";