Как сделать чтобы класс activ оставался после перезагрузки страниц, ''на чистом JS"?

Question

[Link-Z]

html код

<nav class="nav" id="nav">
  <a class="nav__link active" href="#">Главная</a>
  <a class="nav__link " href="#">Услуги</a>
  <a class="nav__link" href="#">Портфолио</a>
</nav>

css код

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav__link {
  margin-right: 20px;
  font-size: 20px;
  text-decoration: none;
  color: black;
  font-weight: 800;
  padding: 10px 15px;
}

.nav__link:hover {
  background-color: silver;
}

.active {
  background-color: red;
}

js код

window.onload = function() {
  let element = document.getElementsByClassName('nav__link');
  localStorage.setItem('activ', 'active');
  for (let i = 0; i < element.length; i++) {
    element[i].addEventListener('mousedown', makeActive12);
  }

  function makeActive12() {


    if (localStorage.getItem('activ') !== null) {
      console.log('work');
      let activ = localStorage.getItem('activ');
      for (let i = 0; i < element.length; i++) {
        element[i].classList.remove(activ);

      }
      this.classList.add(activ);
    }
  }
}

Пытаюсь решить проблему через localStorage, сайт много страничный так что в ссылках будут адреса на другие страницы, и проблема в том что, после перезагрузки activ слетает, а нужно чтобы сохранился.

Comments

[WapSter]

зачем ты в localstorage кладешь слово active?) Логика такая при загрузки документа проверяешь значения адреса документа, потом просто пробегаешься по ссылкам сравнивая адреса ссылок и если одинаковые, то той ссылке задаешь active. Тут даже хранилище не нужно.

[edward_freedom]

а что ты хочешь добиться тем, что в локалстор будет слово актив? Просто актив не поможет, надо же еще что именно актив

[Link-Z]

Тимур Турсунбаев, извини,что туплю я просто только новичок) Можешь показать на примере ну или более подробнее) если конечно время есть)

И так же у меня есть вариант без localstorage но после перезагрузки он обнуляется,а мне надо,что сохранился

let elem, makeActive;

elems = document.getElementsByClassName('nav__link');


makeActive = function () {
    
    for (let i = 0; i < elems.length; i++){
        elems[i].classList.remove('active');
        this.classList.add('active');
    }
        
        

};

for (let i = 0; i < elems.length; i++){
    elems[i].addEventListener('mousedown', makeActive);
    
}

[Link-Z]

edward_freedom, а можно по подробние , с моим примером пожалуйста !?!

Answer 1

[GenJet]

Подобный вопрос задавался мною вот здесь Сохранение добавленного класса в localStorage?

Comments

[Link-Z]

Я новичок не могу разобраться можно , по подробнее пожалуйста и на моём примере ?)

[GenJet]

Link-Z, мне надо посмотреть вашу верстку, что бы понять. И мне не совсем понятно почему ваши ссылки не обернуты списком ul > li или это не основное меню? Вариант как-нибудь связаться. А решение проблемы после, выложим сюда.

[Link-Z]

GenJet, Просто смотрел уроки там делали такое меню или более правильно делать с

• ,
• ? Cвязаться можно в телеграме или как вам удобние, вот выложил кусочек верстки на CodePen -> или нужен кусочек по больше тогда могу скинуть архив в телегу !)

[GenJet]

Link-Z, Дай свой телеграм)

[Link-Z]

GenJet, @LinkZeat