sessionStorage Bootstrap Tabs

by Alexander Sevirinov

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab">
  <li class="nav-item cont">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">{PHP.L.Main}</a>
  </li>
  <li class="nav-item cont">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">{PHP.L.projects_projects} {USERS_DETAILS_PROJECTS_COUNT}</a>
  </li>
  <li class="nav-item cont">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">{PHP.L.reviews_reviews} {USERS_DETAILS_REVIEWS_COUNT}</a>
  </li>
  <li class="nav-item cont">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">{PHP.L.market} {USERS_DETAILS_MARKET_COUNT}</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
    {USERS_DETAILS_PM}
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    {PROJECTS}
  </div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">
    {REVIEWS}
  </div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
    {MARKET}
  </div>
</div>

JavaScript

$(() => {
// set the variables
  let $myTab = $('#myTab');
  let sessionStorageKeyName = 'active-myTab';
  // check the presence of the stored value in sessionStorage
  let loadActiveTab = () => sessionStorage[sessionStorageKeyName];
  // save the id of the active tab in sessionStorage
  let saveActiveTab = value => sessionStorage[sessionStorageKeyName] = value;
  // if there is a stored value in sessionStorage
  if (loadActiveTab()) {
  	// deactivate all active tabs by default
    $.each($myTab.find('.nav-link'), (_, item) => $(item).tab('dispose'));
    // activate tab on id from sessionStorage
    $myTab.find('#' + loadActiveTab()).tab('show');
  }
  // save the id of the selected tab in the sessionStorage
  $('a[data-toggle="tab"]').on('shown.bs.tab', e => saveActiveTab($(e.currentTarget).attr('id')));
});