Сохранение клика в локальном хранилище, чтобы сохранить выбранное меню боковой панели открытым после нажатия элементов

Question

Я использую Boosttrap 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>

Вот фрагмент кода jpenery, но он не работает

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