Regarding using History.js to manage browser state

History.pushState(data,title,url)

History.pushState({state:1}, "State 1", "?state=1")

suppose if i need to store page number and sort order then what code i need to write?

url part is mandatory ?

how to get back the state when user click on browser back or forward buttons?

suppose i have a object like this

var PageState= {
    PageNo:1,
    SortCol:"Name",
    SortOrder:"ASC"
};

so can i store it like this way

History.pushState({state:PageState}, null, null); ?

when user click on browser back and forward button then how could i get back the state from browser history using History.js lib ?

looking for code sample. thanks

Solution

The URL parameter is required because that's what gets appended to the base URL in the address bar. If you want to stay on the same path, but save a new history state, you could use the current url: History.pushState(state, null, location.href).

The window emits an event when a history state is changed.

var PageState = {
    PageNo: 1,
    SortCol: "Name",
    SortOrder: "ASC"
};

History.pushState(PageState, null, location.href);

stateChangeHandler = function(event) {
    // This PageState is the same object defined above
    var PageState = event.state;
    var NewLocation = event.target.location.href;
};

// These two statements are nearly equivalent. Only one is needed.
window.onpopstate = stateChangeHandler;
window.addEventListener("popstate", stateChangeHandler);