JQuery/JavaScript: how to retain active nav state after link?

Question

I've found many posts on how to add the active class to a nav link via jquery, but nothing on how to maintain the active state after the nav link is clicked.

Using code found on this site, I'm removing and adding the active class onclick. In an attempt to keep this active state after navigating/reloading, my thought is to set session variables via onclick, and re-add the active class.

What I have is not working.

This seems to work, but doesn't seem to be best-practice, by today's standards.

HMTL:

 <nav>
    <a href="about.xhtml" id="about" >About</a>
    <span class="nav_divide"></span>
    <a href="work.xhtml" id="work" >Work</a>
    <span class="nav_divide"></span>
    <a href="mission.xhtml" id="mission" >Mission</a>
    <span class="nav_divide"></span>
    <a href="contact.xhtml" id="contact" >Contact</a>
</nav>   

CSS:

 nav a.active {
     border-bottom: 3px solid #d10f0f;
 }

Script:

 //Check for session variables.
$(document).ready(function() {

    //If 'page' session is defined
    if (window.sessionStorage.pageSession) {

        // make selected nav option active.
        var activeTab = '#' + window.sessionStorage.pageSession;
        $(activeTab).addClass('active');

    } else {

        // If pageSession is not defined, you're at home
        window.sessionStorage.pageSession = ('page', 'home');
    }

    //Set link location for page refresh/reload


 });

// Place or remove nav active state.
$(document).on('click','nav a',function(){

    //Set 'page' and 'link' variables based on nav values. 
    var page = this.id;
    var link = this.href;

    // Set 'page' and 'link' session variables based on nav values.
    var window.sessionStorage.pageSession = ('page', page);
    var window.sessionStorage.linkSession = ('link', link);

    // Update classes.
    $('nav .active').removeClass('active'); 
    $(this).addClass('active');

    // Link to nav ahref.
    window.location = sessionStorage.linkSession;

});

Answer 1

You can use localStorage! this is an example:

 //Check for session variables. $(document).ready(function() { // Set paramenters obj for initialization let paramObj = {page:'current-page-name',link:location.href}; // Initialize pageSession obj to storage the current page localStorage.setItem('pageSession', JSON.stringify(paramObj)); // Retrieve page session settings updated let pageStorage = localStorage.getItem('pageSession') != undefined ? JSON.parse(localStorage.getItem('pageSession')) : paramObj; // make selected nav option active. let activeTab = '#' + pageStorage.page; $(activeTab).addClass('active'); //Set link location for page refresh/reload $(document).on('click','nav a',function(e){ e.preventDefault(); //Set 'page' and 'link' variables based on nav values. let page = JSON.parse(localStorage.getItem('pageSession')).page; let link = JSON.parse(localStorage.getItem('pageSession')).link; // Set 'page' and 'link' session variables based on nav values. localStorage.setItem('pageSession', JSON.stringify({page:$(this).attr('id'), link:$(this).attr('href')})); // Update classes. $('nav .active').removeClass('active'); $(this).addClass('active'); // Link to nav ahref. window.location = $(this).attr('href'); }); }); 

 nav a.active { border-bottom: 3px solid #d10f0f; } 

 <nav> <a href="javascript:;" id="home" >Home</a> <span class="nav_divide"></span> <a href="javascript:;" id="about" >About</a> <span class="nav_divide"></span> <a href="javascript:;" id="work" >Work</a> <span class="nav_divide"></span> <a href="javascript:;" id="mission" >Mission</a> <span class="nav_divide"></span> <a href="javascript:;" id="contact" >Contact</a> </nav> 

There are a lot of ways for doing that. This is only one of ways!

--------------- EDITED ---------------

Now the code initialize pageSession on every page, so the JSON.parse(...) was solved!

Try it here jsfiddle . Now it works!

I hope it help.