如何在导航栏上获取当前元素并保存在localStorage上？

Question

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.

<ul>
 <li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
</ul>

I try to get from $(this) and then use after the page is reload in order to add the class active.

$(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( "<span> - 2nd!</span>" );
  }

});

jsFiddle

Best Regards.

Answer 1

You need to store the index of the element:

$('.navigation-item').on('click', function (e) {
    var current = $(this );
    console.log(current);
    console.log(JSON.stringify(current));
    localStorage.setItem('activeTab', $('.navigation-item').index(current));

});

And then, use the index to get back the element:

var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
        activeTabEL = $('.navigation-item').eq(parseInt(activeTab));
   activeTabEL.addClass('active'); 
  // $('#nav1').parent().addClass('active'); 
    console.log(activeTabEL);
    $( "ul li.navigation-item" ).eq(parseInt(activeTab)).append( "<span> - 2nd!</span>" );
}

Example: https://jsfiddle.net/xmzb7hdk/7/

Answer 2

You don't need much JavaScript. You can use an HTML5 custom attribute to identify each element in the nav ( data-nav-item ):

<ul>
    <li data-nav-item="nav-1" id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
    <li data-nav-item="nav-2" class="navigation-item"><a href="#" >Nav 2</a></li>
    <li data-nav-item="nav-3" class="navigation-item"><a href="#" >Nav 2</a></li>
    <li data-nav-item="nav-4" class="navigation-item"><a href="#" >Nav 2</a></li>
</ul>

Then it's just a simple 3 lines of JavaScript to set the value:

$(document).on("click", "[data-nav-item]", function(event) {
    localStorage.setItem("activeTab", this.getAttribute("data-nav-item"));
});

After that, you can identify the active nav using:

var activeTab = $("[data-nav-item='" + localStorage.getItem("activeTab") + "']")

Answer 3

You can store the id Instead of storing the whole object. It simplifies the use on retrieval.

Fiddle here

HTML:

<ul>
  <li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
  <li id="nav2" class="navigation-item"><a href="#" >Nav 2</a></li>
  <li id="nav3" class="navigation-item"><a href="#" >Nav 3</a></li>
  <li id="nav4" class="navigation-item"><a href="#" >Nav 4</a></li>
</ul>

Script:

$(document).ready(function () {

    $('.navigation-item').on('click', function (e) {
        var currentID = $(this).attr("id");
        console.log(currentID+" = stored to localStorage");
        localStorage.setItem('activeTab', currentID);

    });

    var activeTab = localStorage.getItem('activeTab');
    if (activeTab!="") {
        console.log(activeTab+" = retrieved form localStorage");
        $("#"+activeTab ).append( "<span> - active!</span>" );
        $("#"+activeTab ).addClass('active');
    }

});