kirashoo42
@kirashoo42
web design

Как сохранять события в localStorage js?

Здравствуйте, я новичок в js и ломаю голову над такой задачей:
Хочу чтобы при нажатии кнопки когда меняется цвет он оставался даже если выйти из браузера
Сохраняю его через localStorage, в Application он записывается не пропадает но цвет на блоке не сохраняется
Желательно простым языком :(
(function () {
	if (localStorage.getItem('theme') !== null) {
	    localStorage.getItem('theme')
	}

	const blue = document.querySelector('#pink')

	blue.addEventListener('click', () => {
		blue.classList.toggle('blueTheme')
		window.localStorage.setItem('theme', 'blueTheme')

	})
}())
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ответы на вопрос 3
sergiks
@sergiks Куратор тега JavaScript
♬♬
Костыльный в лоб вариант:
загрузка страницы
  текущий цвет = есть что в LS ? что-то из LS  :  цвет-по-умолчанию

нажали на кнопку
  поменяли цвет
  сохранили в LS


Вариант получше:
загрузка страницы
  переменная_Состояние = значение-по-умолчанию (true или false)
  есть что в LS ?  переменная_Состояние значение из LS
  сделать цвет по Состоянию

нажатие кнопки
  обновить переменную_Состояния
  сохранить в LS
  сделать цвет по Состоянию

spoiler
(function () {
  const storageKey = 'theme';

  const state =  {}

  const stored = localStorage.getItem(storageKey);
  state.theme = stored ? JSON.parse(stored) : false; // default

  const el = document.querySelector('#pink');

  const render = () => el.classList[state.theme ? 'add' : 'remove']('blueTheme');
  render();

  const toggleTheme = () => {
    state.theme = ! state.theme;
    localStorage.setItem(storageKey, JSON.stringify(state.theme));
    render();
  }
  el.addEventListener('click', toggleTheme);
}())
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Ткнуть в доку лучше готового к копипасте ответа
localStorage.getItem сам не поставит класс элементу, он просто читает значение
if (localStorage.getItem('theme') !== null) {
    localStorage.getItem('theme') // эта строка ничего не делает
}


Попробуйте так:
(function () {
  const blue = document.querySelector('#pink')

  switch (localStorage.getItem('theme')) {
      case 'blueTheme':
          blue.classList.add('blueTheme')
  }

  blue.addEventListener('click', () => {
    if (blue.classList.contains('blueTheme')) {
        blue.classList.add('blueTheme')
        localStorage.setItem('theme', 'blueTheme')
    } else {
        blue.classList.remove('blueTheme')
        localStorage.removeItem('theme')
    }
  })
}())
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы