将单击存储在本地存储中以在单击项目后保持侧边栏选择的菜单打开

Question

我正在使用 bootstrap 4，我想保持侧边栏选择切换菜单在页面刷新或页面重新加载时保持打开这是我的侧边栏 html。

<nav id="sidebar">
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-th-large"></i>
                        <span class="nav-label">Dashboards</span>
                    </a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="index.html"><i class="far fa-circle"></i> Dashboard v.1</a>
                        </li>
                        <li>
                            <a href="dashboard_v2.html"><i class="far fa-circle"></i> Dashboard v.2</a>
                        </li>
                        <li>
                            <a href="dashboard_v3.html"><i class="far fa-circle"></i> Dashboard v.3</a>
                        </li>
                        <li>
                            <a href="dashboard_v4.html"><i class="far fa-circle"></i> Dashboard v.4</a>
                        </li>
                        <li>
                            <a href="dashboard_v5.html"><i class="far fa-circle"></i> Dashboard v.5</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-image"></i>
                        <span class="nav-label">Layouts</span>
                    </a>
                </li>
                <li>
                    <a  href="#graphs" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="far fa-chart-bar"></i>
                         <span class="nav-label">Graphs</span>
                    </a>
                    <ul class="collapse list-unstyled" id="graphs">
                        <li><a href="graph_flot.html"><i class="far fa-circle"></i> Flot Charts</a></li>
                        <li><a href="graph_morris.html"><i class="far fa-circle"></i> Morris.js Charts</a></li>
                        <li><a href="graph_rickshaw.html"><i class="far fa-circle"></i> Rickshaw Charts</a></li>
                        <li><a href="graph_chartjs.html"><i class="far fa-circle"></i> Chart.js</a></li>
                        <li><a href="graph_chartist.html"><i class="far fa-circle"></i> Chartist</a></li>
                        <li><a href="c3.html"><i class="far fa-circle"></i> c3 charts</a></li>
                        <li><a href="graph_peity.html"><i class="far fa-circle"></i> Peity Charts</a></li>
                        <li><a href="graph_sparkline.html"><i class="far fa-circle"></i> Sparkline Charts</a></li>
                    </ul>
                </li>

这里是 codepen jquery sn-p 但它不起作用

 $(document).ready(function(){

        //localStorage.clear();   // Uncomment to clear ALL storage.

        // Timer needed because of Bootstrap's animation delay.
        var timer;

        $("ul").on("click",function(e){
          console.log("Click!");

          // Clear previous timer if any.
          clearTimeout(timer);
          timer = setTimeout(function(){

            // Get expanded states for each ul.
            var expanded=[];
            $("ul").each(function(){
              var thisExpanded = $(this).attr("aria-expanded");
              console.log(thisExpanded);

              if(typeof(thisExpanded) != "undefined"){
                expanded.push( thisExpanded );
              }else{
                expanded.push("undefined");
              }
            });

            // Show it in console.
            var expandedString = JSON.stringify(expanded);
            console.log( expandedString );

            // Save it in Storage.
            localStorage.setItem("ULexpanded",expandedString);
          },600);


        });

        // On load, set ul to previous state.
        console.log("---- On Load.");

        // Parse the string back to an array.
        var previousState = JSON.parse(localStorage.getItem("ULexpanded"));
        console.log(previousState);

        // If there is data in locaStorage.
        if(previousState != null){
          console.log("Setting ul states on...");

          $("ul").each(function(index){

            // If the ul was expanded.
            if(previousState[index] == "true"){
              console.log("Index #"+index);
              $(this).addClass("show").attr("aria-expanded", previousState[index]);
            }
          });
        }

        });

有什么方法可以存储刷新页面上打开的选定侧边栏菜单，任何帮助将不胜感激。

Answer 1

保存状态：

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

在页面加载时检索：

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