Блог

Главная - Вопросы по программированию - Сохраните изменения в Интернете после обновления

Сохраните изменения в Интернете после обновления

#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. Извините, что я не объяснил ясно. Теперь, если я нажму на значок луны, темная тема будет активирована, и вместо нее появится значок солнца. Когда я обновляю страницу, темная тема все еще активирована, но значок снова переключается на луну, я хочу, чтобы значок солнца продолжал отображаться, пока темная тема все еще активирована, и не менялся при обновлении страницы.

Метки: