Tengo un jQuery que buscó el evento en el que se hizo clic y cambié el html interno según el elemento en el que se hizo clic. Pero el problema es que cuando la página se recarga, elimina el html actualizado y recupera el html inicial. Traté de usar la función de almacenamiento local. No estoy seguro de usar correctamente esto.

HTML

 <nav class="woocommerce-MyAccount-navigation dropdown"> <a href="#" class="js-link">Dashboard <i class="fa fa-chevron-down"></i></a> <ul class="js-dropdown-list"> <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard"> <a href="https://www.example.com/mijn-account/">Dashboard</a> </li> <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account"> <a href="https://www.example.com/mijn-account/edit-account/">Mijn Gegevens</a> </li> <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--wishlist"> <a href="https://www.example.com/verlanglijst/?wishlist-action">Verlanglijst</a> </li> <li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address"> <a href="https://www.example.com/mijn-account/edit-address/">Mijn Adressen</a> </li> </ul> </nav>

Quiero actualizar el HTML interno del elemento .js-link. Al igual que cuando se hace clic en Mijn gegevens, debería ser "Mijn gegevens" en lugar de Dashboard.

JS

 jQuery(function() { var list = jQuery('.js-dropdown-list'); var link = jQuery('.js-link'); link.click(function(e) { //e.preventDefault(); list.slideToggle(200); }); list.find('li').click(function() { if (jQuery(this).attr('class') == localStorage.getItem("Activeli")) { var text = jQuery(this).html(); var icon = '<i class="fa fa-chevron-down"></i>'; link.html(text+icon); list.slideToggle(200); } var id = jQuery(".woocommerce-MyAccount-navigation-link").attr("class"); localStorage.setItem("Activeli", id); //create a localstorage }); });

¿Puede alguien ayudarme? ¿Cómo puedo lograr esto?

Gracias por adelantado.