javascript - change background of selected navigation for the next load

Question

I am designing a vertical menu for my website and trying to change the background colour of the navigation item when it is clicked and the page loaded using jQuery. It changes the background until the pages is not loaded. When the page is loaded, the background change is not present. I am following this fiddle. I am designing similar to w3school left navigation menu when an item is clicked, it retains the background change for that li/a/navigation item. How can I properly code to keep the background change for that specific link/a navigation item, for the next load? Here is my code.

$('.widget_nav_plus_widget a').click(function(e) {
    $('.widget_nav_plus_widget a').removeClass('current_page_item');
    $(this).addClass('current_page_item');

});

.widget_nav_plus_widget{
    width: 100%;
    height: 30em;
    border: 1px solid #ccc;
    padding: 0;
    overflow: scroll;
    overflow-x: hidden;
}
.widget_nav_plus_widget ul li {
    border-top: 1px solid #ccc;
   background-color:#236870;
    margin-left: -30px;
    margin-right: -30px;
    line-height:1.7em;
    }

.widget_nav_plus_widget ul li a{
color:white;
 text-decoration: none;
  display:block;
} 
.widget_nav_plus_widget ul li a:hover{
color:white;
 display:block;  
  text-indent: 1em;
   background-color:#0034a1;
}
.widget_nav_plus_widget ul ul li{
    text-indent: 1em;
     background-color: white;
     color:black;
    margin-top:-10px;
}
.widget_nav_plus_widget ul ul li a{
color:black;
 text-decoration: none;
    display:block;
  } 
.widget_nav_plus_widget ul ul li a:hover{
color:white;
    display:block;
  text-indent: 1em;
      background-color:#4ba668;
   }
.widget_nav_plus_widget ul ul ul li{
    text-indent: 3em;
}   
.widget_nav_plus_widget ul ul ul li:hover{
    text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li a:hover{
color:white;
    display:block;
  text-indent: 3em;
      background-color:#4ba668;
      
}

.current_page_item{
   background-color:#4ba668;
  color: white;
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id="nav_plus_widget-2" class="widget inner-padding widget_nav_plus_widget XXsnipcss_extracted_selector_selectionXX">
  <div class="menu-cpp-main-menu-duplicate-container">
    <ul id="menu-cpp-main-menu-duplicate" class="menu">
      <li id="menu-item-2486" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2486">
        <a href="#" tabindex="1" >
          Basics
        </a>
        <ul class="sub-menu">
       
          <li id="menu-item-2463" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2463">
            <a href="#cpp-loops" tabindex="1">
              C++ Loops
            </a>
          </li>
          <li id="menu-item-2464" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2464">
            <a href="#c-functions" tabindex="1">
              C++ Functions
            </a>
            <ul class="sub-menu">
              <li id="menu-item-2465" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2465">
                <a href="#cpp-functions-overloading" tabindex="1">
                  C++ Functions Overloading
                </a>
              </li>
            </ul>
          </li>
          <li id="menu-item-2466" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2466">
            <a href="#cpp-structure" tabindex="1">
              C++ Structures
            </a>
          </li>
          <li id="menu-item-2467" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2467">
            <a href="#cpp-pointers" tabindex="1">
              C++ Pointers
            </a>
          </li>
        </ul>
      </li>
      <li id="menu-item-2468" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2468">
        <a href="#cpp-object-oriented-programming" tabindex="1">
          C++ Object Oriented Programming
        </a>
        <ul class="sub-menu">
          <li id="menu-item-2469" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2469">
            <a href="#c-classses-objects" tabindex="1">
              C++ Classses and Objects
            </a>
          </li>
          <li id="menu-item-2470" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2470">
            <a href="#cpp-inheritance" tabindex="1">
              C++ Inheritance
            </a>
          </li>
          
      </ul>
    </ul>
  </div>
</aside>

question from:https://stackoverflow.com/questions/65910111/change-background-of-selected-navigation-for-the-next-load

Answer 1

You can use the Localstorage, I have made some changes in you JS code.

const currentPage = localStorage.getItem("currentPage");
$(`a[href='${currentPage}']`).addClass('current_page_item');

$('.widget_nav_plus_widget a').click(function(e) {
    $('.widget_nav_plus_widget a').removeClass('current_page_item');
    $(this).addClass('current_page_item');
    localStorage.setItem("currentPage", $(this).attr('href'));

});