1

I've seen a few web apps lately that by clicking buttons change the content and effective state of the page. Then they have links to navigate to another part of the app. Sometimes I'd then like to go back by pressing the browser back button, and I expect the page to be in the state it was when I left. But I often see the content from when I first entered that page.

What's a good way in a modern web app to architect the navigation so that back button returns to you the previous (last) state of the page.

Stephen
  • 4,228
  • 4
  • 29
  • 40

3 Answers3

0

This article may have some answers. It details how to use HTML5's pushState and popState to maintain state in an web app when forward/back are used, without fully refreshing the page.

http://diveintohtml5.info/history.html

Jim Blackler
  • 22,946
  • 12
  • 85
  • 101
0

Am not sure what u mean by "modern", but you might wish to check this discussion here (about how manipulation of browser history might be controlled and why [it's not evil sometimes]), and also look into this jQuery plugin (for hashable history and state).

And for a related SO Question : check this

Community
  • 1
  • 1
JWL
  • 13,591
  • 7
  • 57
  • 63
0

I suppose you are referring to a dynamic one page app, powered by AJAX.

You can use the new PushState() and replaceState() methods of the history object, which are supported in most modern browsers (inc. IE10), and allow you to manipulate the browser's history without triggering a page refresh. This allows you to attach an object to the state, which will be available to you once an onpopstate event has been triggered, that is, when the user presses back or forward in his browser.

once the object has been passed you can manipulate the page accordingly. e.g. you can pass a unique ID for a post, and load it with AJAX.

You can read more about it in Mozilla Developer Network

Matanya
  • 6,233
  • 9
  • 47
  • 80