Keep CSS styles after navigating to another page

Question

I have some jQuery code for my navbar that controls a dropdown and some other styling. For testing purposes, I've made the first line:

$( ".dropdown--link").on("click", function(event) {
    event.preventDefault();
})

but this stops my link from functioning. Is there a way to maintain the jQuery styling, and link to the new page while maintaining the added style? For example, all styling after event.preventDefault(); is removed after I navigate to the new page and I want it to remain (in the case where preventDefault is removed).

( ".dropdown--link").on("click", function(event) {
        // event.preventDefault();

        var targetPosition = $(this).offset().left;
        var targetWidth = $(this).width();
        var targetCenter = targetPosition + (0.5 * targetWidth) - 10;

        $( "nav ul li" ).each(function() { $(this).removeClass("bold"); });
        $(this).addClass('bold');
        $(".arrow-down").show();
        $(".arrow-down").css("left", targetCenter);
})

Answer 1

You can save the "status" of the style to local storage and every time you load a page change the style if it was changed previously.

function changeStyle() {
        // event.preventDefault();
        localStorage.setItem("styleChanged", "1");

        var targetPosition = $(this).offset().left;
        var targetWidth = $(this).width();
        var targetCenter = targetPosition + (0.5 * targetWidth) - 10;

        $( "nav ul li" ).each(function() { $(this).removeClass("bold"); });
        $(this).addClass('bold');
        $(".arrow-down").show();
        $(".arrow-down").css("left", targetCenter);
}

$(".dropdown--link").on("click", changeStyle);

$.ready(function(){
    var styleChanged = localStorage.getItem("styleChanged");
    if (styleChanged && styleChanged.equals("1")) {
        changeStyle();
    }
});

When you'll want to undo the change run this code:

localStorage.setItem("styleChanged", "0");