How to maintain state of page with tabs on browser refresh

Question

In ExtJs, what is the best way to handle Browser refresh?

Say, I've a page with two tabs A and B and the token when tab A is active is #mytoken/:someidforA and the token when tab B is actibe is #mytoken/:someidforB

How do we ensure that the page stays in the same tab when we refresh the browser?

I'm doing something like this using Router in ExtJs5

window.onbeforeunload = function() {
    token = // get history token
     MyApp.getController('Main').redirectTo(token);
}

and inside the ViewControllers -

routes: {
    "#mytoken/:someidforA" : "loadA",
    "#mytoken/:someidforB" : "loadB" 

}

Is this a good way to do it?

Answer 1

I would personally use the documented routes

Example:

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'user/:id' : 'onUser'
    },

    onUser : function(id) {
        //...
    }
});

You can also define the default route with the defaultToken property:

defaultToken : 'home'

It seems like you are already using some of these features. If the URL is something like example.com/#user/4 then on page refresh the application can handle this route as it previously did and show the same page/section.

To restore all the tabs that were open before refresh you'd probably have to look at using something like localstorage to keep state across page refreshes