javascript - How to keep active class when changing pages

Question

I am trying to add an active class to nav item, depending what page your on. I am using this script:

<script type="text/javascript">
    $(document).ready(function () {
        $("#side-bar a").click(function () {
            var id = $(this);

            $(id).siblings().find(".active").removeClass("active");
            $(id).addClass("active");
            localStorage.setItem("selectedolditem", id);
        });

        var selectedolditem = localStorage.getItem('selectedolditem');

        if (selectedolditem !== null) {
            $(selectedolditem).siblings().find(".active").removeClass("active");
            $(selectedolditem).addClass("active");
        }
    });
</script>

See full jsfiddle here: https://jsfiddle.net/ebo7hLo9/ It adds the active class, but it loads a new page, it disappears. What am I doing wrong?

Answer 1

https://jsfiddle.net/ebo7hLo9/10/ - here's a fiddle!

$(document).ready(function () {

            $("#side-bar a").click(function () {
                var id = $(this);

                $(".active").removeClass("active");
                $(id).addClass("active");
                localStorage.setItem("selectedolditem", $(id).text());

            });

            var selectedolditem = localStorage.getItem('selectedolditem');

            if (selectedolditem !== null) {

                $("a:contains('" + selectedolditem + "')").addClass("active");
            }
        });

Your code was having issues remembering what element to grab. I think it's due to the web storage API's unfamiliarity with objects. Instead I got the text from the element that was selected, stored it in localStorage and on page load matched it with the correct element. Also there was part of your code that was dealing with finding the class "active" within the siblings() of the selected element and removing it. That complex of code is largely unnecessary. I replaced it with the class selector $(".active")

I didn't change this in the code, but I'd advise against using localStorage in favor of sessionStorage so that the storage will clear itself on tab/browser close.

For more info take a look at this previous stackoverflow post: Storing Objects in HTML5 localStorage