How do you clear an HTML form on page reload but not when the user navigates BACK to the page?

Question

I am using the trick where you store some data in a hidden form in order to be able to be able to persist it so that when the user navigates away from the page and then uses the BACK button to come back I can restore the data to the page without hitting the server again...

However, this trick means that the same thing happens when the user clicks refresh or reload... (even shift-reload in Firefox). I would like to detect that the user is clicking reload as opposed to clicking the back button so that I can start fresh on a reload but still restore the previous data when the user navigates away and back.

Is there a way to do this? I've been investigating the onbeforeunload event etc but haven't figured anything out yet.

Edited to address Josh's question of "Why?":

The page is a search results page with a bunch of AJAX filters. The user might spend quite some time tweaking the filters to get just the set of search results they want... then if they either click away from the page or type in a new address in the URL bar... then come back to the page, if I don't do something like this, they will have to start all over and do all of the filtering again. This has been a very frustrating experience for the users we've brought in for usability testing.

This is the type of thing that a tech savy user might solve by just opening a new tab instead of clicking/typing away, but unfortunately the vast majority of our users are not tech savy, so the obvious solution is to have the page restore the filters/results when the user navigates back to the page.

On the other hand, there are two reasons I can think of why a user might reload the page 1. The results on the search page have a time-sensitive element in them and the user may want to get more up-to-the-minute results or 2. occasionally there may be an error where the page did not load properly. In both of these cases, if I restore the page to the saved state they will get the same (old and/or broken) results and not the fresh/fixed results they were expecting.

Hope that clears it up.

Answer 1

When I load the page with the form in it, I fill in the values I had stored away previously as you do, but then clear that data from my session. A second page refresh will find no stored data and provide a blank form. If the form is re-submitted, then I store the fresh data back in the session, ready for a back button press...

Answer 2

You could perhaps do this on the server side by looking at the headers sent with the request. Certain headers are used when the user performs a refresh or hard-refresh.

Use Fiddler or Firebug to examine the headers to see what you could use.

For Firefox at least, hitting F5 causes a

Cache-Control: max-age=0

header to be sent. Doing a Ctrl-F5 sent these

Pragma: no-cache
Cache-Control: no-cache

For a breakdown of other browsers behaviour, check out this excellent answer to another question.

Answer 3

If you can't get the form based approach to work, you may want to investigate one the 'ajax history' libraries like RSH.