Нужно сохранить выбранную тему пользователем, но не могу понять, что делать?

Question

[Алексей Яковлев]

Есть 2 кнопки - первая темная тема, вторая светлая. Нужно, чтобы при нажатии на определенную кнопку выбранная пользователем тема сохранялось. Использовал localStorage.

Код:

// Кнопки
const darkThemeBtn = document.querySelector('.blockThemes__darkThemeBtn');
const lightThemeBtn = document.querySelector('.blockThemes__lightThemeBtn');
// Блоки
const header = document.querySelector('.header');
const mainLook = document.querySelector('.main');

lightThemeBtn.addEventListener('click', () => {
    localStorage.setItem('pressedBtnTheme', true);
});

darkThemeBtn.addEventListener('click', () => {
    localStorage.setItem('pressedBtnTheme', false);
});

if (localStorage.getItem('pressedBtnTheme')) {
    header.classList.remove('darkTheme');
    mainLook.classList.remove('darkTheme');
    header.classList.add('lightTheme');
    mainLook.classList.add('lightTheme');
} else {
    header.classList.remove('lightTheme');
    mainLook.classList.remove('lightTheme');
    header.classList.add('darkTheme');
    mainLook.classList.add('darkTheme');
}

Answer 1

[сергей захарченко]

ocalStorage.setItem('item', Theme)
потом получаете localStorage.getItem('item');

Comments

[Алексей Яковлев]

Не сохраняется при перезагрузке

[Kovalsky]

Алексей Яковлев, то есть вы хотите сказать, что если вы сохраните значение в лс:

localStorage.setItem('test', 42)

...то после перезагрузки обращение по ключу 'test':

localStorage.getItem('test')

...вернёт не 42?

[сергей захарченко]

да

[Kovalsky]

сергей захарченко, и что, в консоли даже нету никаких ошибок когда вы сохраняете значение?

[ThunderCat]

Kovalsky, Какой такой консоль-шмонсоль???

[сергей захарченко]

нет

[Kovalsky]

сергей захарченко, ну хорошо, а что выведет в консоль это:

localStorage.setItem('test', 42)
console.log( localStorage.getItem('test') )

?

[сергей захарченко]

[Kovalsky]

сергей захарченко, хорошо, а теперь на той же странице сначала localStorage.setItem('test', 42), потом перезагрузка страницы, а потом console.log( localStorage.getItem('test') ) что выведет? Просто это было бы очень странное поведение, поэтому надо всё это проверить

[сергей захарченко]

[сергей захарченко]

вот так должно работать
lightThemeBtn.addEventListener('click', changeTheme('darkTheme','lightTheme'));
darkThemeBtn.addEventListener('click', changeTheme('lightTheme','darkTheme'));
function changeTheme (oldTheme, newTheme = false) {
let theme = newTheme || localStorage.getItem('Theme');
localStorage.setItem('Theme', theme);
header.classList.remove(oldTheme);
mainLook.classList.remove(oldTheme);
header.classList.add(theme);
mainLook.classList.add(theme);
}