Блог

Главная - Вопросы по программированию - Изменение класса с помощью JavaScript, как добавить в localstorage?

Изменение класса с помощью JavaScript, как добавить в localstorage?

#javascript #html #font-awesome

#javascript #HTML #шрифт-потрясающий

Вопрос:

Итак, я переключаюсь между двумя значками Font Awesome fas fa-toggle-off и fas fa-toggle-on эффективно создаю эффект переключения при нажатии. Переключатель изменяет мой сайт или, скорее, похоже, переводит мой сайт из темного режима в светлый режим, однако код для переключения таблицы стилей полностью отдельный. Все, над чем я здесь работаю, — это эффект переключения путем переключения значков FA. Я хочу, чтобы переключение классов сохранялось по всему сайту, и я не уверен, как интегрировать что-то вроде, скажем, localStorage с тем, что у меня есть прямо сейчас, поскольку я довольно новичок в JS. Не использую jQuery и не хочу.

Вот что происходит:

HTML

 <i class="fas fa-toggle-off" id="switch"></i>

JavaScript

 let mode = document.getElementById('switch');

function toggleClass(el, c1, c2) {
    el.classList.toggle(c1);
    el.classList.toggle(c2);
}

function myToggle(el, c1, c2) {
    toggleClass(mode, "fa-toggle-off", "fa-toggle-on");
}

mode.addEventListener('click', myToggle);

Что я могу добавить к этому, чтобы любой класс (независимо от того, что пользователь выбирает при переключении переключателя) оставался там по всему сайту? Очевидно, что это работает для одной страницы, но затем возвращается назад или сбрасывается на других страницах.

Комментарии:

1. Вы можете использовать localStorage для хранения выбранного / переключенного класса. Пожалуйста, проверьте здесь: developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Пожалуйста, обратите внимание, что это не постоянное решение 🙂

2. Куда я должен это добавить?

3. После того, как вы установили свой класс в свой элемент в toggleClass, вы также можете установить переменную в localStorage. При загрузке страницы проверьте, есть ли ключ в localStorage, и установите необходимые классы для ваших элементов =)

4. «однако код для переключения таблицы стилей полностью отдельный» ~ если вы имеете в виду, что при этом переключении применяется общий тег (например, body.darkTheme ), вы можете установить эффект в css, как и все другие темные эффекты?

5. Понадобится наглядный пример