How do you save the contents of a Nav-tabs using localstore?

Question

I have an example here: When I submit the form, I want to save the tab ID and ID of the div that is currently selected to not need to bring it in the Hidden type input

<script type="text/javascript">

$(document).on('click','.btn-enviar',function(){            
       //DÚVIDA COMO PEGAR A ABA QUE FOI SELECIONADA NO  nav-tabs
   if (typeof(Storage) !== "undefined") {

      localStorage.setItem("abaatual", "aba");
      aba_atual =  localStorage.getItem('abaatual');     
   }

});

function AdicionarClasseMenuSelecionado(){
   var menuatual = document.getElementById('MenuSelecionado').value;
   var abaatual  = document.getElementById('AbaSelecionado').value;

   alert("Menu Selecionado : "+menuatual);
   alert("Aba Selecionado : "+abaatual);

   //remove todos os active do cabecalho 
   $("ul.nav.nav-tabs li").removeClass("active");
   //remove todos os active do content 
   $('.tab-content').find('.tab-pane').removeClass('active in');

   //adiciona o active que retornou 
   $("#"+menuatual).addClass("active in");
   $("#"+abaatual).addClass("active");
};


$(document).ready(function(){
   var menuatual = document.getElementById('MenuSelecionado').value;

   if (menuatual == "") {
      alert("não foi enviado nenhum menu no input");
   } else {
      AdicionarClasseMenuSelecionado();
   }      
});
</script>

---

<div class="container">

   <input name="MenuSelecionado" type="hidden"  value="andamentos" id="MenuSelecionado">
   <input name="AbaSelecionado" type="hidden"  value="aba2" id="AbaSelecionado">


    <form action="#" method="POST" class="form-horizontal" role="form">
       <div class="form-group">
          <legend>Cadastro Teste</legend>
       </div>

       <ul class="nav nav-tabs">
          <li class="active" id="aba1" ><a data-toggle="tab"    href="#encerramento">Encerramento</a></li>
          <li id="aba2" ><a data-toggle="tab"  href="#andamentos">Andamentos</a></li>
          <li id="aba3"><a data-toggle="tab"   href="#valores">Valores</a></li>
       </ul>

       <div class="tab-content">

          <div id="encerramento" class="tab-pane fade active">
             <h3>Encerramento</h3>
             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>

          <div id="andamentos" class="tab-pane fade ">
             <h3>Andamentos</h3>
             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
          </div>

          <div id="valores" class="tab-pane fade ">
             <h3>Valores</h3>
             <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>

       </div>

       <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
             <button type="submit" class="btn btn-primary btn-enviar">Submit</button>
          </div>
       </div>
    </form>

 </div>

Answer 1

How you are using Jquery how to do the following:

var aba = $('.nav-tabs').find('li[class*='active']');
var id = aba.attr('id');

And save to localStorage