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

【问题标题】：How do I get the current element on nav bar and save on localStorage?如何在导航栏上获取当前元素并保存在 localStorage 上？
【发布时间】：2016-10-27 09:41:12
【问题描述】：

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

<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) 获取，然后在页面重新加载后使用以添加活动类。

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

最好的问候。

【问题讨论】：

LocalStorage 将数据保存为字符串。调用localStorage.setItem('activeTab', current);与调用localStorage.setItem('activeTab', current.toString());是一样的

标签： javascript jquery html css local-storage

【解决方案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/

【讨论】：

【解决方案2】：

您不需要太多的 JavaScript。您可以使用 HTML5 自定义属性来识别导航中的每个元素 (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") + "']")

【讨论】：

【解决方案3】：

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

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>

脚本：

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

});

【讨论】：