#javascript #html #jquery #css #reactjs
#javascript #HTML #jquery #css #reactjs
Вопрос:
У меня есть кнопка с некоторым jquery, эта кнопка переключает тему с темной на светлую или светлую на темную. Я хочу, чтобы эта кнопка оставалась включенной даже после обновления страницы или перехода на другую страницу. Что мне делать!
Комментарии:
1. вы должны сохранить свое состояние в localStorage, cookie или хранилище сеансов.
2. Спасибо, но не могли бы вы, как мне сохранить мою тему в локальном хранилище
Ответ №1:
Вы должны хранить данные в cookies PHP или Session с помощью PHP.
Таким образом, даже при обновлении страницы изменения будут сохранены.
Вы также можете хранить данные в файлах cookie с помощью JavaScript.
Допустим, пользователь изменил цвет фона на #33FFEA.
Чтобы сохранить цвет фона в файлах cookie, вы можете использовать этот код:
localStorage.setItem("backgroundColor", "#33FFEA");
И теперь для получения данных обратно из файлов cookie вы можете использовать этот код:
document.body.style.backgroundColor=localStorage.getItem("backgroundColor");
Для добавления сохраненного цвета непосредственно <body> при загрузке страницы используйте этот код (скомпилированный код):
<body onload="LightDarkMode()">
<script>
funtion LightDarkMode()
{
document.body.style.backgroundColor=localStorage.getItem("backgroundColor");
}
</script>
Вы должны помнить, что цвет уже сохранен в файлах cookie для приведенного выше кода.
Ответ №2:
для достижения этой цели вы можете использовать механизм локального хранилища, я предполагаю, что у вас есть функция, подобная приведенной ниже, для изменения темы
function change_theme(){
/*your change theme jquery*/
localStorage.setItem("theme",'your css class'); //setting theme to local storage
}
Чтобы получить это при загрузке страницы
$( document ).ready(function() {
var theme = localStorage.getItem('theme'); //getting back theme from localstorage
$( "body" ).addClass(theme); //adding class to body tag
});