How do I detect if a user has got to a page using the back button?

Question

This question is similar to Track when user hits back button on the browser, but not the same... I have a solution and am posting it here for reference and feedback. If anyone has any better options, I'm all ears!

The situation is that I have a page with an "in place edit", a la flickr. I.e. there is a "click here to add a description" DIV, which when clicked turns into a TEXTAREA with Save and Cancel buttons. Clicking Save posts the data to the server to update the database and puts the new description in the DIV in place of the TEXTAREA. If the page is refreshed, the new description is displayed from the database with a "click to edit" option. Fairly standard web 2.0 stuff these days.

The issue is that if:

1. the page is loaded without the description
2. a description is added by the user
3. the page is navigated away from by clicking a link
4. the user clicks the back button

Then what is displayed (from the browser's cache) is the version of the page without the dynamically modified DIV containing the new description.

This is a fairly big problem as the user assumes that their update has been lost and won't necessarily understand that they need to refresh the page to see the changes.

So, the question is: How can you flag a page as being modified after it has loaded, and then detect when the user "goes back to it" and force a refresh in that situation?

Answer 1

Use a hidden form. Form data is preserved (typically) in browsers when you reload or hit the back button to return to a page. The following goes in your page (probably near the bottom):

<form name="ignore_me">     <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" /> </form> 

In your javascript, you will need the following:

var dirty_bit = document.getElementById('page_is_dirty'); if (dirty_bit.value == '1') window.location.reload(); function mark_page_dirty() {     dirty_bit.value = '1'; } 

The js that sniffs the form has to execute after the html is fully parsed, but you could put both the form and the js inline at the top of the page (js second) if user latency is a serious concern.

Answer 2

Here is a very easy modern solution to this old problem.

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {     alert('Got here using the browser "Back" or "Forward" button.'); } 

window.performance is currently supported by all major browsers.