jQuery 和 HTML，如何在下拉切换菜单中使用本地存储

Question

我有一个问题要问你。我正在尝试在我的下拉切换菜单中使用 localstorage。我有以下 HTML 代码：

<li class="nav-item" id="sidebar">
                    <a class="sidebar-heading" href="#thirdSubmenu" data-toggle="collapse" 
                    class="dropdown-toggle">Anagrafica</a>
                    <ul class="collapse list-unstyled" id="thirdSubmenu">
                        <li>
                            <a class="nav-link" href="">
                                <span data-feather="database"></span>
                                Categorie Materiale</a>
                        </li>
                        <li>
                            <a class="nav-link" href="">
                                <span data-feather="database"></span>
                                Sottocategorie Materiale</a>
                        </li>

..

我想要这样，当我点击 Anagrafica 并打开下拉菜单时，当我更新我的页面时它也保持打开状态，存储 dropdwon 是否打开。我已经尝试了以下代码，但确实有效。我不擅长 jQuery，所以我希望你们中的某个人可以帮助我。

这里是我的 jQuery 代码：

    $("#thirdSubmenu li a").on("click", function() {
    var container = $(this).closest("li");
    var selected_item_index = $("#thirdSubmenu li a").index(container);
    localStorage.setItem("sidebar_selected", selected_item_index );
});

$(function() {
    $("#thirdSubmenu li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active");
});

Answer 1

您也可以使用 JavaScript Cookie。在 cookie 中存储一个值

Answer 2

您想在其兄弟姐妹中索引父 <li>

尝试改变

 $("#thirdSubmenu li a").on("click", function() {
    var container = $(this).closest("li");
    var selected_item_index = $("#thirdSubmenu li a").index(container);
    localStorage.setItem("sidebar_selected", selected_item_index );
});

到

 $("#thirdSubmenu li a").on("click", function() { 
    // get index of parent `<li>` within it's siblings       
    var selected_item_index = $(this).parent().index();
    localStorage.setItem("sidebar_selected", selected_item_index );
});