Restoring Saved States

You should restore state after navigating the history (for example, when the user presses the back button) or reloading the page. Restoring state is accomplished by listening to the popstate event. The popstate event fires when state changes as a result of history navigation. At this point the data object for the destination state can be retrieved via history.state. In cases where the page is reloaded the popstate event will not fire, but history.state can still be accessed at any time during or even after the load. Thus code like the following can restore state at the appropriate times:

function init() {

/* ... */

// Handle page load and reload

loadState();

// Listen for history navigations (e.g. the back button)

window.addEventListener("popstate", loadState, false);

}

function loadState() {

// Grab the data for the current state so we can restore it

var state = history.state;

/* ... */

}

init();