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

Question

[Кира]

Здравствуйте, я новичок в 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')

	})
}())

Comments

[Otrivin]

Простым языком - где ты в этом коде извлекаешь сохранённое в localStorage значение и присваиваешь на его основе класс нужному блоку?

Метод .getItem() позволяет только получить значение из базы (localStorage) по указанному ключу. Но ты сначала выдергиваешь только лишь для проверки на null, а в случае удачи, зачем-то повторно выдергиваешь, ни к чему не присваивая.

Answer 1

[Сергей Соколов]

Костыльный в лоб вариант:

загрузка страницы
  текущий цвет = есть что в 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);
}())

Answer 2

[Дмитрий Беляев]

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')
    }
  })
}())

Answer 3

[Иван]