How to save active tab using cookie (in Smarty templating engine)?

Question

Smarty

Good afternoon. There seemed to be a small problem, but it was not possible to solve it.
I'm working with the Smarty templating engine and I needed to make 2 menu tabs. There were no problems with this, but the question arose of how to make the person using the menu stay in the selected tab while he moves through the menu inside it.
It is immediately clear that this can be implemented using cookies . But the implementation itself unfortunately did not come to me. I searched the entire Internet, but apparently due to the peculiarities of Smarty, none of the options worked.
Menu code:

<div class="sidebar-line">
    <ul class="ext-tabs-sidebar" id="sidebar-menu">
  <li class="active"> 
            <a href="#tab1"><i class="fa fa-bars"></i> {$lang.member_center}</a> 
        </li>
   <li> 
            <a href="#tab2"><i class="fa fa-home"></i> Магазин</a>  
        </li>            
    </ul><!-- Конец .ext-tabs-sidebar -->

Everything is standard in principle, and here are the menu blocks themselves:
(Everything in square brackets refers directly to Smarty)

<div class="tab-content">
  <div id="tab1" class="tab-pane active"> 
      <!-- ********** -->
      <!-- NEW MODULE -->
      <!-- ********** -->

      <div class="sidebar-module"> 
    <nav class="sidebar-nav-v2" >                         
        <ul>		
      <li><a href="#"><i class="{$item.icon}"></i> {$item.text}  {$item.indicator}<i class="fa fa-caret-left pull-right"></i></a>		   
          <ul>
        <li class="page-arrow active-page"><a href="{$subitem.url}"><i class="{$subitem.icon}"></i>{$subitem.text} {$subitem.indicator}</a></li>				
        <li><a href="{$subitem.url}"><i class="{$subitem.icon}"></i>{$subitem.text} {$subitem.indicator}</a></li>	
         </ul>
      </li>
      <li class="page-arrow active-page"><a href="{$item.url}"><i class="{$item.icon}"></i>{$item.text} {$item.indicator}</a></li>			
      <li><a href="{$item.url}"><i class="{$item.icon}"></i>{$item.text} {$item.indicator}</a></li>			
      <div class="spacer-20"></div>
      <div class="spacer-20"></div>
      <!--{/if}-->		
      <!--{/if}-->
      <!--{/foreach}-->			

        </ul>

    </nav><!-- End .sidebar-nav-v1 --> 
        </div><!-- End .sidebar-module -->                                     
  </div>   
             
  <div id="tab2" class="tab-pane">

      <!-- ********** -->
      <!-- NEW MODULE -->
      <!-- ********** -->
        <div class="sidebar-module"> 
    <nav class="sidebar-nav-v2">    
        <ul>			
      <li><a href="#">{if $items.icon}<i class="{$items.icon}"></i>{/if} {$items.text} {$items.indicator}<i class="fa fa-caret-left pull-right"></i></a>			
          <ul>
        
        <li class="page-arrow active-page"><a href="{$subitems.url}">{if $subitems.icon}<i class="{$subitems.icon}"></i>{/if} {$subitems.text} {$subitems.indicator}</a></li>			    
        
        <li><a href="{$subitems.url}">{if $subitems.icon}<i class="{$subitems.icon}"></i>{/if} {$subitems.text} {$subitems.indicator}</a></li>			    
        
          </ul>
      </li>
      <li class="page-arrow active-page"><a href="{$items.url}">{if $items.icon}<i class="{$items.icon}"></i>{/if} {$items.text} {$items.indicator}</a></li>
      
      <li><a href="{$items.url}">{if $items.icon}<i class="{$items.icon}"></i>{/if} {$items.text} {$items.indicator}</a></li>		    		
        </ul>
    </nav>    
      </div><!-- End .sidebar-module --> 
        
  </div>
    </div><!-- End .tab-content -->

I tried various combinations with cookies but often the firebag did not see the newly created cookies.
Guys, help with literature or advice, because the truth is no longer strong enough. The simplest task, but I can’t solve it in any way :(
I would be glad for any help!

Answer 1

Too lazy to read all this, but on the subject in the title - the active tab can be saved in different ways:
hash in the address bar, when changing the tab, we change the hash ( location.hash , if you don’t want to drive it into history, then location.replace()
) option with JS - (local | session)Storage
You can save the selected tab in the SESSION (if the page is reloaded).
And if not, then it is possible in cookies, when changing the tab, we drive the name or id of the selected tab into cookies and that's it.
What exactly doesn't work for you? Search separately, and then put everything together, and if it doesn’t work, then teach or prepare $$ for those who taught