如何在NAV BAR上获取当前元素并保存在LocalStorage上

Question

我有一个导航栏，它具有指向页面的链接，我想在单击此单击时保存当前的导航活动，因为我在其他页面中有相同的菜单。

<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>

我尝试从$(this)获取，然后在重新加载页面后使用以添加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

最好的问候。

Answer 1

您需要存储元素的索引：

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

然后，使用索引恢复元素：

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>" );
}

示例：https：//jsfiddle.net/xmzb7hdk/7/

Answer 2

您不需要太多JavaScript。您可以使用HTML5自定义属性来识别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>

那么，这只是一个简单的3行JavaScript来设置值：

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

之后，您可以使用：

识别活动导航

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

Answer 3

您可以存储id而不是存储整个对象。它简化了检索的用途。

小提琴

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>

脚本：

$(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');
    }
});