Maintain jquery javascript tab when refreshing the page

Question

Good morning, I have the following doubt, I have a system of tabs in javascript but whenever I select a tab and update the page it automatically goes back to the first one which is bad because I intend to put buttons that act with get, How can I keep it in the same tab if I update or get it from the same page? follows code.

<script type="text/javascript">
$(document).ready(function(){
  $("#content div:nth-child(1)").show();
  $(".abas li:first div").addClass("selected");       
  $(".aba").click(function(){
      $(".aba").removeClass("selected");
      $(this).addClass("selected");
      var indice = $(this).parent().index();
      indice++;
      $("#content div").hide();
      $("#content div:nth-child("+indice+")").show();
   });

 $(".aba").hover(
      function(){$(this).addClass("ativa")},
      function(){$(this).removeClass("ativa")}
  );              
});

<div class="TabControl">
    <div id="header">
        <ul class="abas">
            <li>
                <div class="aba">
                    <span>Estatisticas</span>
                </div>
            </li>
            <li>
                <div class="aba">
                    <span>Slides</span>
                </div>
            </li>
            <li>
                <div class="aba">
                    <span>Produtos</span>
                </div>
            </li>
            <li>
                <div class="aba">
                    <span>Serviços</span>
                </div>
            </li>
            <li>
                <div class="aba">
                    <span>Usuarios</span>
                </div>
            </li>
            <li style="float:right;"><div class="aba"><span>Alterar Senha</span></div></li>
        </ul>
    </div>
    <div id="exit">
        <ul>

            <li class="exit"><a href="logoff.php">Sair</a></li>
            <li><input type="text" value="Master" disabled="disabled"></li>
        </ul>
    </div>
    <div id="content">
        <div class="conteudo">
            Conteúdo da aba 1
        </div>
        <div class="conteudo">
            Conteúdo da aba 2
        </div>
        <div class="conteudo">
            <?php include("produtos.php"); ?>
        </div>
        <div class="conteudo">
            Conteúdo da aba 4
        </div>
        <div class="conteudo">
            Conteúdo da aba 5
        </div>
        <div class="conteudo">
            Conteúdo da aba 6
        </div>
    </div>
</div>

Answer 1

Save the index to which the tab corresponds in localStorage.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css'>

<style
>body {
  padding: 15px;
}
</style>
<div class="TabControl">
    <div id="header">
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#Estatisticas" data-toggle="tab">Estatisticas</a></li>
            <li><a href="#Slides" data-toggle="tab">Slides</a></li>
            <li><a href="#Produtos" data-toggle="tab">Produtos</a></li>
            <li><a href="#Serviços" data-toggle="tab">Serviços</a></li>
            <li><a href="#Usuarios" data-toggle="tab">Usuarios</a></li>
            <li style="float:right;"><div class="aba"><span>Alterar Senha</span></div></li>
        </ul>
    </div>
</div>

 <div id="content">
    <div class="tab-content">
        <div class="tab-pane active" id="Estatisticas">Conteúdo da aba 1</div>
        <div class="tab-pane" id="Slides">Conteúdo da aba 2</div>
        <div class="tab-pane" id="Produtos">Conteúdo da aba 3</div>
        <div class="tab-pane" id="Serviços">Conteúdo da aba 4</div>
        <div class="tab-pane" id="Usuarios">Conteúdo da aba 5</div>
    </div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

<script>

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
   localStorage.setItem('activeTab', $(e.target).attr('href'));
});
// Aqui salva o índice ao qual corresponde a aba. Você pode vê-lo na ferramenta de desenvolvimento do Chrome.

//Obtém os dados da localStorage
var activeTab = localStorage.getItem('activeTab');

// No console, ele mostrará a aba onde você fez o último clique e o 
// salve em "activeTab". Deixo o console para você ver. E quando você der refresh
// no navegador, o último em que você clicou estará ativo.

console.log(activeTab);

if (activeTab) {
   $('a[href="' + activeTab + '"]').tab('show');
}

</script>

localStorage - allows us to store data simply and without expiration, that is, they remain there until we erase by code or by the browser itself.

sessionStorage- its operation is identical to the localStorage, with the difference that the data only last during the session, they will only be deleted when the user closes the browser.

Answer 2

I would advise using one local Storage browser, can be done in JS with

var abaAtual = 1;
// Salvar a aba atual quando trocar
localStorage.setItem('abaAtual ', abaAtual);

// Buscar se tem uma aba atual selecionada
var abaAtual = localStorage.getItem('abaAtual');
console.log('Aba Atual: ', abaAtual);

The local Storage is basically a way to save a key-value pair in browser storage