刷新后保持网页更改

Question

我只是使用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";
  }
}

Answer 1

您可以使用localStorage.setItem('key', 'value')设置和localStorage.getItem('key')读取localStorage项。

例如，您可以设置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";
  }
}