Как сохранить/восстановить состояние кнопки после обновления страницы?

Question

Как сохранить/восстановить состояние кнопки после обновления страницы?

Рейтинг: 0Ответов: 2Опубликовано: 15.03.2023

У меня возникли проблемы с сохранением статуса кнопки после обновления страницы. Были попытки использовать localStorage, как показано ниже, но это не работает:

const toggleSectionText = (section, btnText1, btnText2, parText1, parText2) => {
    const btn = section.querySelector('input')
    const par = section.querySelector('p')

    if (btn.value === btnText1) {
        btn.value = btnText2
        par.textContent = parText2
    } else {
        btn.value = btnText1
        par.textContent = parText1
    }
}

window.addEventListener('load', () => {
    if (localStorage.getItem('Открыть форточку') === null)
        localStorage.setItem('Открыть форточку', false);
    })
    const window1 = document.querySelector('#window');
    window1.addEventListener('click', () => {
        localStorage.setItem(
            'Открыть форточку',
            localStorage.getItem('Открыть форточку') === 'false'
                ? true
                : false
        );
        toggleSectionText(window1, 'Закрыть форточку', 'Открыть форточку', 
    'Форточка открыта', 'Форточка закрыта')});

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Т.к. вы выложили только фрагмент кода, то даю решение разбив на части. Первым делом, необходимо инициализировать интерфейс исходя из состояния указанного в localStorage. Для этого вам нужно модифицировать функцию обратного вызова load следующим образом:

const window1 = document.querySelector('#window'); // селектор поднимем выше

window.addEventListener('load', () => {
  const isOpen = localStorage.getItem('Открыть форточку') === 'true'
    ? true
    : false;
    
  const btn = window1.querySelector('input')
  const par = window1.querySelector('p')
  // инициализация интерфейсных элементов
  if (isOpen) {
    btn.value = 'Закрыть форточку'
    par.textContent = 'Форточка открыта'
  } else {
    btn.value = 'Открыть форточку'
    par.textContent = 'Форточка закрыта'
  }
})

Также нужно изменить выставление значения в localStorage в функции обратного вызова click:

window1.addEventListener('click', () => {
  localStorage.setItem(
    'Открыть форточку',
    // заменим проверку на строку true. Все что отличное от 'true' будет false 
    localStorage.getItem('Открыть форточку') === 'true' ? 
    false :
    true
  );
  toggleSectionText(window1, 'Закрыть форточку', 'Открыть форточку',
    'Форточка открыта', 'Форточка закрыта')
});

Замечу, лучше проверять === 'true', т.к. это покрывает любые иные значения из localStorage отличных от 'true' и избавляет от необходимости делать проверку на == null и === 'false'

Answer 2

▲ -1

const toggleSectionText = (section, btnText1, btnText2, parText1, parText2) => {
    const btn = section.querySelector('input')
    const par = section.querySelector('p')

    if (btn.value === btnText1) {
        btn.value = btnText2
        par.textContent = parText2
        localStorage.setItem('open', true)
    } else {
        btn.value = btnText1
        par.textContent = parText1
        localStorage.setItem('open', false)
    }
}

и уже это суете в слушатель события клика. а далее проверяете значение поля open из localStorage и расставляете нужные значения. не забудьте про дефолтное состояние, когда localStorage пуст!

Как сохранить/восстановить состояние кнопки после обновления страницы?

Ответы