Как сделать что бы класс сохранялся при переходе по страницам? CSS/JS

Question

Есть несколько ссылок вот такого вида:

<a href="javascript:void(0)" OnClick="setCookie('city', 'Урюпинск')" class="city">Урюпинск</a>

Каждая ссылка при нажатии записывает куку city с названием своего города.

Вот простая JS функция:

function setCookie(name, value) {
  document.cookie = name + "=" + value;
}

Кука записывается, с этим нет проблем.

Вопрос: как добавить класс, например active, к нажатой ссылке, чтобы он сохранялся при переходе по страницам?

Answer 1

Что бы просто добавить класс active элементу на который пришелся клик одновременно с установкой cookie достаточно чуть доработать логику Вашего clickHandler'a:

const setCookie = (name, value) => {
  // document.cookie = name + "=" + value
}

const handleClick = event => {
  const target = event.target
  const city = target.dataset.city
  setCookie("city", city)
  target.classList.add("active")
  console.log("Присутствие класса:", target.classList.contains("active"))
}

document.querySelectorAll("a").forEach(item => {
  item.addEventListener("click", handleClick)
})

<a data-city="Урюпинск" class="city">Урюпинск</a>

А что бы класс сохранялся при переходе между страницами (если это не SPA):

window.addEventListener("DOMContentLoaded", () => {
  // ...ваша логика по получению значения cookie
  // ниже моковое значение
  const cookieValue = "Урюпинск"
  const target = document.querySelector(`[data-city=${cookieValue}]`)
  target.classList.add("active")
  console.log("Присутствие класса:", target.classList.contains("active"))
})

<a data-city="Урюпинск" class="city">Урюпинск</a>

БЛОГ НА HUSL

Как сделать что бы класс сохранялся при переходе по страницам? CSS/JS

Ответы (1 шт):