How to keep menu item selected after refresh

Question

I have this table with parent and children folders. I am trying to make the parent's background highlight yellow when it is selected so that it will be easier to know that it is selected. However for some reason (I did not build this) whenever the menu item is clicked on the page is refreshed so the highlighted background goes away. How can I make the background remain highlighted please even after refresh? Thanks alot.

This is my code:

var elems = document.querySelectorAll('.rows');

var fnClick = function(){
    var ie = document.querySelectorAll('.rows');
    for (var x = 0; x < ie.length; x++) {
        elems[x].classList.remove("bg-color");
    }
    this.classList.add("bg-color");

}

for (var i = 0; i < elems.length; i++){
     elems[i].addEventListener("click", fnClick);
}

You can use cookies or local storage as described here: https://stackoverflow.com/questions/37575999/how-do-i-save-background-color-to-localstorage — Federico Moretti, Feb 12 '20 at 14:41

score -1 · Answer 1 · answered Feb 12 '20 at 14:42

-1

Well I guess you can store this information into the local storage and check when the page loads if this information is there. Hope it will help.

answered Feb 12 '20 at 14:42

Vincent Valvas

94
7

Yes I've been trying to use local storage but it is still not working for me !!! – Rachel Fitz Feb 12 '20 at 20:24

score -1 · Answer 2 · answered Feb 12 '20 at 14:43

-1

just record what index was selected and after the refresh add the color to the last selected stored index

answered Feb 12 '20 at 14:43

Aurelius

178
1
1
14

How to keep menu item selected after refresh

2 Answers2