如何在浏览器刷新时使用选项卡维护页面状态

Question

在 ExtJs 中，处理浏览器刷新的最佳方式是什么？

比如说，我有一个包含两个选项卡的页面 A 和 B 选项卡 A 处于活动状态时的令牌是 #mytoken/:someidforA 选项卡 B 处于活动状态时的令牌是 #mytoken/:someidforB

我们如何保证刷新浏览器时页面停留在同一个标签中？

我正在使用 ExtJs5 中的 Router 做类似的事情

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

在 ViewControllers 内部 -

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

}

这样做好吗？

Answer 1

我个人会使用记录的 routes

示例：

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

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

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

您还可以使用 defaultToken 属性:

定义默认路由

defaultToken : 'home'

您似乎已经在使用其中的一些功能。如果 URL 类似于 example.com/#user/4 那么在页面刷新时，应用程序可以像以前一样处理此路由并显示相同的 page/section.

要恢复刷新前打开的所有选项卡，您可能需要考虑使用 localstorage 之类的东西来保持页面刷新时的状态

如何在浏览器刷新时使用选项卡维护页面状态

How to maintain state of page with tabs on browser refresh

extjs

browser-refresh

single-page-application

extjs5