Javascript 如何在导航栏上获取当前元素并在本地存储上保存？

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

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

---

致以最诚挚的问候。

您需要存储元素的索引：

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

然后，使用索引返回元素：

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

var-activeTab=localStorage.getItem（'activeTab'）；
如果（活动选项卡）{
activeTabEL=$（'.navigation item'）.eq（parseInt（activeTab））；
activeTabEL.addClass（'active'）；
//$（'#nav1'）.parent（）.addClass（'active'）；
log（activeTabEL）；
$（“ul li.navigation item”）.eq（parseInt（activeTab））.append（“-2nd！”）；
}

---

示例：

您不需要太多JavaScript。您可以使用HTML5自定义属性来标识导航中的每个元素（

数据导航项

）：

之后，您可以使用以下方法识别活动导航：

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

---

您可以存储

id

，而不是存储整个对象。 它简化了检索的使用

HTML:

脚本：

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

});

$（文档）.ready（函数（）{
$（'.navigation item'）。在（'click'，函数（e）上{
var currentID=$（this.attr（“id”）；
log（currentID+“=存储到本地存储”）；
setItem（'activeTab'，currentID）；
});
var activeTab=localStorage.getItem（'activeTab'）；
如果（activeTab！=“”）{
log（activeTab+“=从本地存储中检索）；
$（“#”+activeTab.append（“-active！”）；
$（“#”+activeTab）.addClass（'active'）；
}
});

LocalStorage将数据保存为字符串。调用localStorage.setItem（'activeTab'，current）与调用

localStorage.setItem（'activeTab'，current.toString（））相同
<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');
    }

});