При создании веб-приложений обычно используются динамические пользовательские интерфейсы, в которых определенные элементы или разделы необходимо выделить или пометить как активные. Один из способов добиться этого — добавить и удалить класс CSS, широко известный как «активный класс». В этой статье мы рассмотрим различные методы сохранения и получения состояния активного класса с помощью LocalStorage в JavaScript.

Метод 1. Использование API LocalStorage JavaScript

API LocalStorage позволяет нам хранить данные локально в браузере пользователя. Мы можем использовать этот API для сохранения и получения состояния активного класса. Вот пример того, как это реализовать:

// Save the active class
const setActiveClass = (elementId) => {
  localStorage.setItem('activeClass', elementId);
};
// Retrieve the active class
const getActiveClass = () => {
  return localStorage.getItem('activeClass');
};

В этом методе мы сохраняем идентификатор или идентификатор активного элемента в LocalStorage с помощью метода setItem. Чтобы получить активный класс, мы используем метод getItem.

Метод 2. Использование сериализации JSON

Если вам нужно хранить более сложные структуры данных, такие как массив или объект, вы можете сериализовать данные с помощью JSON. Вот пример:

// Save the active class
const setActiveClass = (elementId) => {
  const activeClasses = JSON.parse(localStorage.getItem('activeClasses')) || [];
  activeClasses.push(elementId);
  localStorage.setItem('activeClasses', JSON.stringify(activeClasses));
};
// Retrieve the active class
const getActiveClass = () => {
  return JSON.parse(localStorage.getItem('activeClasses')) || [];
};

В этом методе мы сохраняем массив активных классов в LocalStorage. Сначала мы извлекаем существующий массив, анализируем его с помощью JSON.parse, добавляем новый элемент, а затем преобразуем его в строку с помощью JSON.stringify, прежде чем сохранить его обратно в LocalStorage.

Метод 3. Использование SessionStorage

Если вам нужно сохранить активный класс только в течение одного сеанса, вместо этого вы можете использовать API SessionStorage. Использование аналогично LocalStorage, но данные удаляются по завершении сеанса. Вот пример:

// Save the active class
const setActiveClass = (elementId) => {
  sessionStorage.setItem('activeClass', elementId);
};
// Retrieve the active class
const getActiveClass = () => {
  return sessionStorage.getItem('activeClass');
};

Метод 4. Использование файлов cookie

Если вам требуется кросс-браузерная совместимость или необходимо обрабатывать случаи, когда LocalStorage отключен, вы можете использовать файлы cookie для сохранения активного класса. Вот пример:

// Save the active class
const setActiveClass = (elementId) => {
  document.cookie = `activeClass=${elementId}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
};
// Retrieve the active class
const getActiveClass = () => {
  const name = 'activeClass=';
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieArray = decodedCookie.split(';');
  for (let i = 0; i < cookieArray.length; i++) {
    let cookie = cookieArray[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return null;
};

В этой статье мы рассмотрели несколько методов сохранения и получения состояния активного класса в LocalStorage. Эти методы обеспечивают гибкость и позволяют выбрать наиболее подходящий подход для ваших конкретных требований. Независимо от того, предпочитаете ли вы использовать API LocalStorage, сериализацию JSON, SessionStorage или файлы cookie, вы можете эффективно сохранить активный класс и улучшить взаимодействие с пользователем вашего веб-приложения.

При выборе подходящего метода не забудьте учитывать конкретные потребности вашего проекта. Приятного кодирования!