Handling GUI after clicking the Back Button

Question

I use a small JS to mark entries as Read upon click, before the user goes to the entry page. When the user clicks Back, the removeClass I used doesn't seem to keep its effect.

Is there a way to force this on Back behavior?

Answer 1

When the user clicks Back, the browser reloads the page from scratch (except Firefox, which remembers form values), and the old page's Javascript and its effects are gone.

To work around this, you can persist the page's state in a cookie, then read the cookie when the page loads and restore the state, using a Javascript cookie library.

Answer 2

The only way to do this with JS is by storing a cookie with the items a user accesses and mark the entries in the cookie as "visited" when the page is loaded. The drawback is that there will be a small delay between the items loading into view and them being marked as visited (kinda like the one here on StackOverflow with a user's ignored and favorite tags).

Other than this, you could use some server side code to remember the visited entries in session.

If the entries are <a> elements, you can style them with:

a:visited {}

Answer 3

IE 8, Firefox and other browsers remember form entries on a back button press. You can use this to store some state in a page for when the user hits refresh or back.

Create a hidden textarea on the page somewhere and store your extra state in there. I use onbeforeunload to stash the state and then pull it out again with onload.

Unfortunately IE6 and 7 don't support remembering your form values on back or reload, so you would have to resort to something like cookies if you care about those browsers. Remember to keep the amount of data you store in the cookies small since it will be sent to the server on every request. You will also want to have some way of clearing out that cookie.

When I want to keep a large amount of disparate state, I use JSON.stringify from Douglas Crockford's json2.js.

Answer 4

As suggested, you can use cookies. Or if you don't want to do that, you can store the info in hidden form field(s), and on page load (or domready) read the value and set the page state as necessary.

Answer 5

I didn't understand your issue. Would you like to elaborate it more?