#javascript #jquery #local-storage
Вопрос:
Я только что добавил темный режим и переключатель валют с помощью JS, но изменения не сохраняются после обновления страницы. Кто-нибудь знает, как использовать localStorage для следующих кодов? Изменения можно увидеть на следующем веб-сайте «Туры в Марокко«.
Темная тема:
var icon = document.getElementById("icon-phone");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
var icon = document.getElementById("icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
Комментарии:
1. Где вы используете локальное хранилище для установки и получения значений?
Ответ №1:
Вы можете использовать localStorage.setItem('key', 'value')
для установки и localStorage.getItem('key')
чтения элемента локального хранилища.
Вы могли бы, например, установить localStorage.setItem('dark-theme', true)
и позже извлечь его с localStorage.getItem('dark-theme')
помощью .
var isDarkTheme = window.localStorage.getItem('dark-theme');
if (isDarkTheme === null) {
isDarkTheme = false;
} else {
isDarkTheme = isDarkTheme === 'true'
}
var icon = document.getElementById("icon-phone");
if (isDarkTheme) {
document.body.classList.add('dark-theme')
}
icon.onclick = function () {
isDarkTheme = !isDarkTheme;
if (isDarkTheme) {
document.body.classList.add('dark-theme');
} else {
document.body.classList.remove('dark-theme');
}
window.localStorage.setItem('dark-theme', isDarkTheme);
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
Комментарии:
1. Привет, я попробовал следующий код и не сработал 🙁
2. @HassanMouhou Попробуйте обновленный код, так как localStorage сохранит переменную в виде строки, а не в виде логического значения, сначала вам придется сравнить ее.
3. Теперь это работает, спасибо. как сделать то же самое, чтобы значки (солнце и луна) также не менялись
4. @HassanMouhou что ты имеешь в виду, говоря «тоже не меняться»? Вы можете переместить оператор if за пределы или скопировать его за пределы метода onclick, чтобы применить его также при первоначальном выполнении кода.
5. Извините, что я не объяснил ясно. Теперь, если я нажму на значок луны, темная тема будет активирована, и вместо нее появится значок солнца. Когда я обновляю страницу, темная тема все еще активирована, но значок снова переключается на луну, я хочу, чтобы значок солнца продолжал отображаться, пока темная тема все еще активирована, и не менялся при обновлении страницы.