Greetings to the person reading this message!
I am relatively new to programming and I have a query... I created a Navigation bar: body > div > nav > div > ul > li*10
I have implemented the styling in CSS.
//Navigation Bar
const list = document.querySelectorAll('.list');
function activeLink(){
list.forEach((item)=>
item.classList.remove('active'));
this.classList.add('active');
if(list.classlist.contains('active')){
localStorage.setItem('on','true');
} else{
localStorage.setItem('on','false');
}
};
if (localStorage.getItem('on') === 'true'){
list.classList.add('active');
} else {
list.classList.remove('active');
};
list.forEach((item)=>
item.addEventListener('click',activeLink));
The issue I'm facing is that the changes are not saved when I refresh the page or navigate to another section. How can I utilize localstorage for this purpose?
I have attempted different methods but haven't been successful yet.
Thank you in advance!