angualr-ui tabs 刷新后返回初始值

Question

RT,使用angular-ui里的tabs做选项卡切换的时候，不会记录当前选项卡选定状态，当有人手贱按刷新的时候，就会返回初始值。如何记录当前选项卡选定状态？

Answer 1

我也碰到过同样的问题，最近在做公司营销活动【发起】页面时，发起分为4个步骤，我将每一步作为一个命名视图，比如：<div ng-if="step == 3" ui-view="step-3"></div>, 通过ng-if来确定显示第几步， 然后在控制器中有一个方法来设置step，方法如下：

$scope.$on('changeStep', function(e, data) {
   $scope.step = data;
});

但是，当编辑到其中某一步时，如果刷新浏览器就会回到第1步状态。一开始我是用localStorage来存储step状态

$scope.step = $localStorage.step ? $localStorage.step : '1';
$scope.$on('changeStep', function(e, data) {
   $scope.step = data;
   $localStorage.step = data;
});
// 不在发起页面时清除数据
$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  if (toState.name != 'app.xx.new' || toState.name != 'app.xx.edit' || toState.name != 'app.xx.view') {
    delete $localStorage.step;
  }
})

这样就可以保存状态了，但是有一个问题是，如果当前编辑到第3步，我又重新开一个窗口从列表页面进入编辑，会直进入第三步，跳过了前二步。
后来我也试过$cacheFactory, 一刷新状态就丢失了，所以最后的解决办法是使用sessionStorage。可以看看社区array_huang的文章localstorage 必知必会来了解二者的使用场景。

这种方式不一定最优，但可以作为替代方案一试。

Answer 2

参考angular cache factory