title: How do I get the current element on nav bar and save on localStorage?
body: <p>I have a nav bar, this has a links to pages, I want to save the current nav active when I clicked on that, this because I have a same menu in the other pages. </p>
  
  <pre><code>&lt;ul&gt;
   &lt;li id="nav1" class="navigation-item"&gt;&lt;a href="#" &gt;Nav 1&lt;/a&gt;&lt;/li&gt;
   &lt;li class="navigation-item"&gt;&lt;a href="#" &gt;Nav 2&lt;/a&gt;&lt;/li&gt;
   &lt;li class="navigation-item"&gt;&lt;a href="#" &gt;Nav 2&lt;/a&gt;&lt;/li&gt;
   &lt;li class="navigation-item"&gt;&lt;a href="#" &gt;Nav 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I try to get from <code>$(this)</code> and then use after the page is reload in order to add the class active.</p>
  
  <pre><code>$(document).ready(function () {
  
    $('.navigation-item').on('click', function (e) {
        var current = $( this );
        console.log(current);
        console.log(JSON.stringify(current));
        localStorage.setItem('activeTab', current);
    });
  
    var activeTab = localStorage.getItem('activeTab');
  
    if (activeTab) {
     // activeTab.addClass('active'); 
     // $('#nav1').parent().addClass('active'); 
        console.log(activeTab);
        $( "ul li:nth-child(2)" ).append( "&lt;span&gt; - 2nd!&lt;/span&gt;" );
    }
  
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Tabares/xmzb7hdk/" rel="nofollow" title="jsFiddle">jsFiddle</a></p>
  
  <p>Best Regards.</p>