如何实现登录后Bootstrap Tab自动返回首个标签页

问题原因 #

你当前使用的localStorage是浏览器持久化存储，只要不手动清除浏览器缓存，存储的数据会长期保留，所以退出账号再重新登录时，之前存储的激活标签状态不会自动消失，才会出现重登后仍停留在旧标签的问题。

解决方法 #

可根据你的业务场景选择以下任意一种方案：

方案1：登出时主动清除标签状态 #

在账号登出的逻辑代码中，新增一行代码清除存储的激活标签记录即可，改动最小：

localStorage.removeItem('activeTab');

登出操作执行后旧的标签记录就会被清空，下次登录读取不到activeTab的值，会默认加载第一个标签。

方案2：改用会话级存储实现刷新保留、重登重置 #

如果你的需求仅为页面刷新时保留当前选中标签，关闭页面/退出登录后自动恢复默认，可直接将代码中的localStorage替换为sessionStorage：

$(document).ready(function(){
  $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    sessionStorage.setItem('activeTab', $(e.target).attr('href'));
  });
  var activeTab = sessionStorage.getItem('activeTab');
  if(activeTab){
    $('#myTab a[href="' + activeTab + '"]').tab('show');
  }
});

sessionStorage的生命周期和浏览器当前会话绑定，关闭标签页、退出浏览器后存储内容会自动清空，重新登录开启新会话时就会默认显示第一个标签，不需要额外修改其他逻辑。

方案3：登录成功时清除标签状态 #

如果不方便修改登出逻辑，也可以在登录成功跳转后的页面增加判断，刚完成登录就清除旧的标签记录：
首先由后端在登录成功渲染的页面中插入一个隐藏标识：

<input type="hidden" id="isNewLogin" value="1">

再修改标签初始化代码增加判断逻辑：

$(document).ready(function(){
  // 新登录状态下清除旧标签记录
  if($('#isNewLogin').val() === '1'){
    localStorage.removeItem('activeTab');
  }
  $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });
  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){
    $('#myTab a[href="' + activeTab + '"]').tab('show');
  }
});

内容的提问来源于stack exchange，提问作者Paschal