CODEWITHSUNDEEP
javascriptjquerycss
K.Z
K.Z

Reputation: 5075

How can I stop removing attached class from jQuery function on page reload

I have a tag wrapped inside li. when user clicked, jquery function is called to change its style

 $(".sortLabelElement").click(function () {
        $(this).addClass("ActiveSortLabel");
    });

Css

.ActiveSortLabel{
font-weight: bold;
text-decoration: none;
background-color:#C6E035;
}

I need to keep this class attached to a tag until is clicked by another a tag in same ul list. My issue is when I click on this a tag link, form is post and page reload and in this happening I lose ActiveSortLabel to given a tag.

<li><a value="Recommended" class="sortLabelElement sortTag    sortClickedEvent">Our Recommendation</a></li>

LocalStorage

localStorage.setItem('ActiveSortLabel', $(this).attr("id"));

Upvotes: 0

Views: 100

Answers (1)

KpTheConstructor
KpTheConstructor

Reputation: 3291

Use session storage instead of local storage .

Session Storage expires when browser tab is closed . Local Storage stores physical cache data on your drive with no expiration date until removed with JavaScript or browser cache is cleared . 

//Example below will clear once browser tab is exited.

    sessionStorage.setItem('ActiveSortLabel', $(this).attr("id"));

//FYI Following line of code will clear storage if user switches tab WITHOUT closing.

    $(window).blur(function(){
    sessionStorage.clear();
   })

Upvotes: 1

Related Questions