Запоминание темного режима между страницами в локальном хранилище
У меня есть этот скрипт для переключения темного режима, указанный в моем CSS, но я не могу понять, как заставить темный режим оставаться включенным между страницами.
Спасибо вперед!
HTML:
<img onclick = "darkmode()" id = "darktoggledesktop" src = "media/darktoggle.svg" alt = "">
<script>
function darkmode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<script>
function menufunction() {
var x = document.getElementById("mobilemenuopen");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
CSS:
.dark-mode {
background-color: black;
color: white;
transition: 0.4s;
}
Я пробовал следить за подобными темами здесь, но, похоже, у меня ничего не получилось.
вы сами ответили на свой вопрос... in local storage
Когда вы заставите его работать (как вы утверждаете, используя (localStorage)[Developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API]), тогда вашим следующим вопросом будет, как остановить ФУК. Если вы используете JavaScript, убедитесь, что ваш код, который считывает из локального хранилища и устанавливает класс, находится сразу после тега <body>. Также уберите переход, если настраиваете под нагрузкой.
См.: stackoverflow.com/questions/2800238/… (не по теме для SO, но включает несколько ссылок на руководства по localStorage)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как вы упомянули, вы можете сделать это, используя localStorage. Если вы не знаете, как им пользоваться, вы можете прочитать больше об этом здесь.
Для этого конкретного примера приведен рабочий сценарий переключения темного режима, который использует localStorage для сохранения предпочтений пользователя при загрузке страницы.
<img onclick = "toggleDarkMode()" id = "darktoggledesktop" src = "media/darktoggle.svg" alt = "">
<script>
// Function to toggle dark mode and save preference in localStorage
function toggleDarkMode() {
let element = document.body;
element.classList.toggle("dark-mode");
if (element.classList.contains("dark-mode")) {
localStorage.setItem("darkMode", "enabled");
} else {
localStorage.setItem("darkMode", "disabled");
}
}
// Function to load dark mode preference on page load
function loadDarkModePreference() {
let darkMode = localStorage.getItem("darkMode");
if (darkMode === "enabled") {
document.body.classList.add("dark-mode");
}
}
// Load dark mode preference when the page loads
window.onload = loadDarkModePreference;
</script>
<script>
function menufunction() {
let x = document.getElementById("mobilemenuopen");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Ох, w3schools - спорно...
Хотя мне кажется, что это немного GPT-esk
@fdomn-m Почему спорно? Извините, если это не понравилось, но я многому научился на их страницах. В чем проблема?
@DarkBee Почему? Потому что я прокомментировал свой код и странно назвал функцию?
Потому что он известен своим низким качеством, плохими практиками и неверной информацией даже после рефакторинга и обновления.
Хорошо, дайте мне ссылку получше, и я ее добавлю. Как уже было сказано, лично мне это очень помогло.
Всегда MDN или спецификация. var в var darkMode = localStorage.getItem("darkMode"); является примером плохой практики. Вам не следует использовать var вот уже почти 10 лет.
Честно говоря: теперь здесь есть хорошая информация/руководства для начинающих. Долгое время это было просто неправильно (даже не просто неверно или устаревшо) - некоторое время назад они сделали огромное обновление, но до сих пор время от времени возникают проблемы или устаревшая информация (как пример выше). Следовательно: спорно (а не общее «не используйте w3schools»)
Вы забыли добавить код, касающийся локального хранилища?