Не сохраняются активные табы при обновлении страницы

Question

Всем привет. У меня есть страница с двумя вкладками однотипного контента, но разные категории. По умолчанию при обновлении страницы активна первая вкладка. Когда я переключаюсь на вторую и обновляю страницу, снова становится активной вторая вкладка. Мне нужно, чтобы активная вкладка запоминалась и при обновлении показывалась именно та, которая была активна последней перед обновлением страницы. Изначально код выглядел так:

const initTabs = function () {
  if (!document.querySelector(".tabItem")) {
    return;
  }
  const tabs = function (e) {
    const tab = e.target.closest(".tabItem");
    if (!tab) {
      return;
    }
    e.preventDefault();
    const cont = tab.closest("[data-tabs]"),
      activeTab = cont.querySelector(".tabItem._active"),
      activeContent = cont.querySelector(".tabContent._active"),
      contents = cont.querySelectorAll(".tabContent"),
      tabNumber = [].slice.call(tab.closest("[data-tab-items]").children).indexOf(tab.closest(".tabItem"));
    activeTab.classList.remove("_active");
    tab.classList.add("_active");
    activeContent.classList.remove("_active");
    contents[tabNumber].classList.add("_active");
    // tab.closest("[data-tab-items]").classList.remove("_active");
    if (contents[tabNumber].querySelector(".swiper")) {
      const sliders = contents[tabNumber].querySelectorAll(".swiper");
      sliders.forEach(function (item) {
        item.swiper.update();
      })
    }
  },
  tabsActivate = function () {
    const tabs = document.querySelectorAll("[data-tabs]");
    tabs.forEach(function (item) {
      item.querySelectorAll(".tabItem")[0].classList.add("_active");
      item.querySelectorAll(".tabContent")[0].classList.add("_active");
    })
  };
  tabsActivate();
  document.addEventListener("click", tabs);
}

Пробовалось сохранить активную вкладку при помощи localStorage. С ним код выглядел так:

const initTabs = function () {
  if (!document.querySelector(".tabItem")) {
    return;
  }
  const tabs = function (e) {
    const tab = e.target.closest(".tabItem");
    if (!tab) {
      return;
    }
    e.preventDefault();
    const cont = tab.closest("[data-tabs]"),
      activeTab = cont.querySelector(".tabItem._active"),
      activeContent = cont.querySelector(".tabContent._active"),
      contents = cont.querySelectorAll(".tabContent"),
      tabNumber = [].slice.call(tab.closest("[data-tab-items]").children).indexOf(tab.closest(".tabItem"));
    activeTab.classList.remove("_active");
    tab.classList.add("_active");
    activeContent.classList.remove("_active");
    contents[tabNumber].classList.add("_active");
    localStorage.setItem('activeTabIndex', tabNumber);
    // tab.closest("[data-tab-items]").classList.remove("_active");
    if (contents[tabNumber].querySelector(".swiper")) {
      const sliders = contents[tabNumber].querySelectorAll(".swiper");
      sliders.forEach(function (item) {
        item.swiper.update();
      })
    }
  },
  tabsActivate = function () {
    const tabs = document.querySelectorAll("[data-tabs]");
    tabs.forEach(function (item) {
      const activeTabIndex = localStorage.getItem('activeTabIndex'); // Получение сохраненного индекса активной вкладки
      const tabItems = item.querySelectorAll(".tabItem");
      const tabContents = item.querySelectorAll(".tabContent");
      if (activeTabIndex !== null) {
        tabItems[activeTabIndex].classList.add("_active"); // Установка сохраненной вкладки как активной при загрузке страницы
        tabContents[activeTabIndex].classList.add("_active"); // Установка соответствующего контента как активного при загрузке страницы
      } else {
        tabItems[0].classList.add("_active");
        tabContents[0].classList.add("_active");
      }
    })
  };
  tabsActivate();
  document.addEventListener("click", tabs);
}

Подскажите, пожалуйста, в чем может быть проблема? Заранее благодарю за любую помощь!

Answer 1

Воссоздав вёрстку по коду и подключив скрипт, всё работало, но подозрение вызвало получение значение из localStorage и последующее его использование, а именно:

// Значение из localStorage всего имеет тип string
const activeTabIndex = localStorage.getItem('activeTabIndex'); 

// ...

if (activeTabIndex !== null) {
  // А тут выполняется поиск в массиве по индексу, индекс должен быть number,
  // но передаётся string.
  tabItems[activeTabIndex].classList.add("_active"); // Установка сохраненной вкладки как активной при загрузке страницы
  tabContents[activeTabIndex].classList.add("_active"); // Установка соответствующего контента как активного при загрузке страницы
}

Скорее всего проблема именно в типе данных, т.к. индекс должен быть типа number, а конвертации нигде не происходило.
_{Ещё странно, что Chrome при этом спокойно отрабатывает код..}

Попробуйте конвертировать значение при получении из localStorage:

const initTabs = function () {
  if (!document.querySelector(".tabItem")) {
    return;
  }
  const tabs = function (e) {
    const tab = e.target.closest(".tabItem");
    if (!tab) {
      return;
    }
    e.preventDefault();
    const cont = tab.closest("[data-tabs]"),
      activeTab = cont.querySelector(".tabItem._active"),
      activeContent = cont.querySelector(".tabContent._active"),
      contents = cont.querySelectorAll(".tabContent"),
      tabNumber = [].slice.call(tab.closest("[data-tab-items]").children).indexOf(tab.closest(".tabItem"));
    activeTab.classList.remove("_active");
    tab.classList.add("_active");
    activeContent.classList.remove("_active");
    contents[tabNumber].classList.add("_active");
    localStorage.setItem('activeTabIndex', tabNumber);
    // tab.closest("[data-tab-items]").classList.remove("_active");
    if (contents[tabNumber].querySelector(".swiper")) {
      const sliders = contents[tabNumber].querySelectorAll(".swiper");
      sliders.forEach(function (item) {
        item.swiper.update();
      })
    } 
  },
  tabsActivate = function () {
    const tabs = document.querySelectorAll("[data-tabs]");
    tabs.forEach(function (item) {
      const activeTabIndex = +localStorage.getItem('activeTabIndex'); // получаем значение и конвертируем его в number
      const tabItems = item.querySelectorAll(".tabItem");
      const tabContents = item.querySelectorAll(".tabContent");
      if (activeTabIndex) {
        tabItems[activeTabIndex].classList.add("_active"); // Установка сохраненной вкладки как активной при загрузке страницы
        tabContents[activeTabIndex].classList.add("_active"); // Установка соответствующего контента как активного при загрузке страницы
      } else {
        tabItems[0].classList.add("_active");
        tabContents[0].classList.add("_active");
      }
    })
  };
  tabsActivate();
  document.addEventListener("click", tabs);
}
initTabs();

БЛОГ НА HUSL

Не сохраняются активные табы при обновлении страницы

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