How can I get current (previous) URL state on statechange

Question

So let's say I have a web app at

localhost:8080/myapp?home

If i change current state home to state1, I want to save the (previous) state home in local storage, like that

$.totalStorage("prevState", window.location.search.substr(1));

But where should this line be executed?

I am also using history.js library. But I can only get URL state after state is changed.

History.Adapter.bind(window, "statechange", function() {
    var page = window.location.search.substr(1); //page === "home"
});

I am also using this function

goTo : function(page) {
    var page = window.location.search.substr(1); //page === "state1", but not with back, forward, backspace buttons
    History.pushState({page: page}, getPageTitle(page), "?" + page);
}

But this only saves previous state when I change URL state with this function call. How can I do it globally, by pressing for example browser back and forward button and backspace or mouse back and forward buttons.

Answer 1

Why don't you create a history stack and add the current state to it? That gives you the opportunity to go back further than just one state. For example:

$(window).on("statechange", function() {
    var historyStack = localStorage.getItem("stateHistory") === null ? [] : JSON.parse(localStorage.getItem("stateHistory"));
    historyStack.push(window.location.search.substr(1));
    localStorage.setItem("stateHistory", JSON.stringify(historyStack));
});

To navigate back you fetch the second last entry in the history stack and subsequently remove the last two(!) entries from the history stack before changing the state.

Answer 2

I'm not sure if this is the correct answer, but I think I would have tried attaching a function to "beforeunload" event, and then use window.location to get the URL. Once you have that, storing it on localStorage must be easy.

window.onbeforeunload=function(e){
    window.location.href.toString().split(window.location.host)[1]
}

I don't know your exact use case.