Как сохранить результат выполнения js кода после перезагрузки страницы?

Question

У меня есть 2 кнопки, которые переключают видимость каталога из формата плитки в список и наоборот. Сейчас, когда перезагружается страница браузера(например переход на 2 страницу каталога) или когда применяются Ajax фильтры и они обновляют содержимое страницы, то каталог всегда возвращается в изначальное положение. Как мне сделать так, что бы выбор посетителя сохранялся?

function btnTiles(){
    const productList = document.querySelector('.catalog>#product__list');
    productList.classList.remove('product__list');
    productList.classList.add('product__tiles');
    
    localStorage.setItem("myKey",JSON.stringify(productList));
}

function btnList(){
    const productList = document.querySelector('.catalog>#product__list');
    productList.classList.add('product__list');
    productList.classList.remove('product__tiles');
}

Answer 1

Используйте вместо localStorage - sessionStorage или cookies.

Вот примерно то что Вам должно подойти.

function btnTiles() {
    const productList = document.querySelector('.catalog>#product__list');
    productList.classList.remove('product__list');
    productList.classList.add('product__tiles');
    sessionStorage.setItem('myKey', 'tiles_view');
}

function btnList() {
    const productList = document.querySelector('.catalog>#product__list');
    productList.classList.add('product__list');
    productList.classList.remove('product__tiles');
    sessionStorage.setItem('myKey', 'list_view');
}

// запускать при загрузке страницы
function initBtnView() {

    const view = sessionStorage.getItem("myKey")
    
    if(view === 'tiles_view') {
      btnTiles();
    } else if(view === 'list_view') {
      btnList();
    }
    
}

БЛОГ НА HUSL

Как сохранить результат выполнения js кода после перезагрузки страницы?

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