Как сохранить toggleClass при обновлении страницы с помощью cookie?

Question

Сайт dle. Имеется переключение со светлой на темную тему путем нажатия кнопки, к которой привязан js код.

$('#site-dark').on('click', function(e) {
$("body").toggleClass("site-dark");
});

Как сделать так, чтобы темная тема сохранялась при обновлении сайта или при переходе на другу страницу?

Answer 1

const possibleClasses = ['light', 'dark'];
const classFromStorage = localStorage.getItem('savedClass');

if (classFromStorage) {
  if (possibleClasses.includes(classFromStorage)) {
    $('body').addClass(classFromStorage);
  } else {
    localStorage.removeItem('savedClass');
  }
}

$('#elemId').on('click', () => {
  const bodyClasses = $('body').attr('class').split(' ');
  const isLight = bodyClasses.find(possibleClasses[0]);
  const isDark = bodyClasses.find(possibleClasses[1]);
  let classToSave = '';
  if (isLight) {
    $('body').removeClass(possibleClasses[0]);
    classToSave = possibleClasses[1];
  } else if (isDark) {
    $('body').removeClass(possibleClasses[1]);
    classToSave = possibleClasses[0];
  } else {
    classToSave = possibleClasses[0]; // or if 'dark' possibleClasses[1]
  }
  $('body').addClass(classToSave);
  localStorage.setItem('savedClass', classToSave);
});

можно спростить если добавить переменную

const possibleClasses = ['light', 'dark'];
let currentMode = '';
const classFromStorage = localStorage.getItem('savedClass');

if (classFromStorage) {
  if (possibleClasses.includes(classFromStorage)) {
    currentMode = classFromStorage;
  } else {
    localStorage.removeItem('savedClass');
  }
}
$('body').addClass(currentMode);

$('#elemId').on('click', () => {
  if (currentMode === possibleClasses[0]) {
    $('body').removeClass(possibleClasses[0]);
    currentMode = possibleClasses[1];
  } else if (currentMode === possibleClasses[1]) {
    $('body').removeClass(possibleClasses[1]);
    currentMode = possibleClasses[0];
  } else {
    currentMode = possibleClasses[0]; // or if 'dark' possibleClasses[1]
  }
  localStorage.setItem('savedClass', currentMode);
});

БЛОГ НА HUSL

Как сохранить toggleClass при обновлении страницы с помощью cookie?

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