Rectangle 27 0

The most obvious example I can see for pushState, replaceState, and window.onpopstate is Ajax navigation for a site.

Say your site or web app has fixed nav & footer.. That way you can load content of new pages into a specific container, say the new <main> element.

You probably won't want to be reloading the page, and just load what you need from the new page.

Using the pushState method means you'll be able to use your browser's Back and Forward buttons to navigate, even though you're not reloading the page.

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.

I think the question was specific about the use of STATE. history.pushState(THIS, title, page);

html5 - pushState: what exactly is the state object for? - Stack Overf...

html5 object history state pushstate
Rectangle 27 0

You have a page where a user can select a color. Every time they do, we generate a new history entry:

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

We leave the state object blank for now and set the URL to the color name (don't reload the page - that URL doesn't exist, so you will get a 404).

Now click on a red, green and blue once each. Note that the URL changes. Now what happens if you click the back button?

The browser does indeed go back in history, but our page doesn't notice that - the URL changes from '/blue' back to '/green', but our page stays at 'You have selected blue'. Our page has gone out of sync with the URL.

This is what the window.onpopstate event and the state object are for:

  • we include our selected color in our state object function doPushState(color) { var state = { selectedColor: color }, title = "Page title", path = "/" + color; history.pushState(state, title, path); };
  • then we listen for the popstate event, so that we know when we have to update the selected color: $(window).on('popstate', function(event) { var state = event.originalEvent.state; if (state) { selectColor( state.selectedColor ); } });

Try the updated example: run fiddle (editor view): our page now updates accordingly when the user navigates back through history.

This is all well and good but what happens when my user shares the myawesomewebsite.com/blue uri with their friend saying look at how awesome the blue theme is on this website and the theme isn't applied because the friend doesn't have the state object stored in their browser, I still have to have some other mechanism in my app to restore state for first time visitors to a uri making this functionality redundant or am I missing something here?

@HelderRoem you're right in that your app has to provide the initial state, but it's not redundant because with the state on the client the app can avoid hitting the server every time the user goes back to /blue

html5 - pushState: what exactly is the state object for? - Stack Overf...

html5 object history state pushstate