Оставаться на той же вкладке после обновления страницы

У меня есть страница, которая содержит один и тот же url, но много вкладок, после того как я нажимаю на вкладку, я могу видеть ее содержимое, но сразу после обновления страницы появляется вкладка(0), но я хочу последнюю использованную вкладку. Как я могу это сделать. вот код js

<script>
    const tabBtn = document.querySelectorAll(".tab");
    const tab = document.querySelectorAll(".tabShow");
    function tabs(panelIndex){
        tab.forEach(function(node){
            node.style.display="none";
        });
        tab[panelIndex].style.display="block";
    }
    tabs(0);
    $(".tab").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    });
</script>

Вы можете создать переменную, которая обновляется при каждом изменении вкладки, а затем проверить, чему равна переменная, чтобы определить, какая вкладка должна быть открыта по умолчанию.

Вы можете использовать Хранилище сессий или Параметры запроса (параметры поиска) или Параметры хэша

Хранилище сессий: может хранить некоторые значения по ключам до закрытия вкладки
. Hash Parameters: данные хранятся в url. Вы можете даже сохранить url где-нибудь или поделиться им, и когда он будет открыт, откроется нужная вкладка
. Query Parameters: то же самое, что и Hash Parameters, но при изменении обновляется вся страница

Хранилище сессий решение:

<script>
  const tabButtons = document.querySelectorAll(".tab");
  const tabs = document.querySelectorAll(".tabShow");

  const changeTab = (tabIndex) => {
    sessionStorage.setItem('currentTab', tabIndex);

    tabs.forEach((node) => { node.style.display = "none"; });
    tabButtons.forEach((tb) => tb.classList.remove('active'));

    tabs[tabIndex].style.display = "block";
    tabButtons[tabIndex].classList.add('active');
  }

  tabButtons.forEach((tabButton, index) => {
    tabButton.onclick = () => changeTab(index)
  });

  changeTab(sessionStorage.getItem('currentTab') || 0);
</script>

Параметры хэша решение: 

<script>
  const tabButtons = document.querySelectorAll(".tab");
  const tabs = document.querySelectorAll(".tabShow");

  const changeTab = (tabIndex) => {
    window.location.hash=`tab=${tabIndex}`;

    tabs.forEach((node) => { node.style.display = "none"; });
    tabButtons.forEach((tb) => tb.classList.remove('active'));

    tabs[tabIndex].style.display = "block";
    tabButtons[tabIndex].classList.add('active');
  }

  tabButtons.forEach((tabButton, index) => {
    tabButton.onclick = () => changeTab(index)
  });

  const hash = new URLSearchParams(location.hash.slice(1));
  changeTab(hash.get('tab') || 0);
</script>

Query Parameters решение
. То же самое, что и решение Hash Parameters, но с search вместо hash

Вернуться на верх