Есть ли способ сделать так, чтобы флажок оставался в том же состоянии после переключения на другую страницу?

Question

Я действительно пытался делать это часами подряд, но не получил никакого результата. Что я хочу сделать конкретно, так это то, что когда пользователь переходит на другую страницу, я хочу, чтобы темный режим или светлый режим (в зависимости от того, что они выбрали) оставались неизменными.

function changeMode() {
    if (document.getElementById("darkModeToggle").checked === true)
    {
        document.getElementById("dark").href = "Style.css";
        alert('You have turned on Dark Mode. Press Enter to continue.');
        localStorage.setItem("DarkMode", "on");
    }
    else{
        document.getElementById("dark").href = "lightmode2.css";
        alert('You have turned on Light Mode. Press Enter to continue.');
        localStorage.setItem("DarkMode", "off");
    }
}

<div id="darkMode">
    <input type="checkbox" class="tooltips" id="darkModeToggle" onchange=" changeMode();" autocomplete="on" checked>
</div>

Я хотел бы, чтобы этот код был в Javascript или CSS, если возможно, иначе другие языки подойдут.

Answer 1

Вы можете использовать локальное хранилище, как и предыдущие ораторы

function changeMode() {
    if (document.getElementById("darkModeToggle").checked === true)
    {
        document.getElementById("dark").href = "Style.css";
        alert('You have turned on Dark Mode. Press Enter to continue.');
        localStorage.setItem("DarkMode", JSON.stringify(true));
    }
    else{
        document.getElementById("dark").href = "lightmode2.css";
        alert('You have turned on Light Mode. Press Enter to continue.');
        localStorage.setItem("DarkMode", JSON.stringify(false));
    }
}

в теге скрипта вы можете сказать:

<script type="text/javascript">
  var darkmode = localStorage.getItem("DarkMode");
  if(darkmode) {
    document.getElementById("darkModeToggle").checked = JSON.parse(darkmode) || false
  } else {
    // No DarkMode-Entry in localStorage
    document.getElementById("darkModeToggle").checked = false
  }

</script>

Answer 2

Вы сохраняете в localStorage, но не можете восстановить его и использовать. Вам необходимо добавить следующий код при загрузке страницы:

    let darkMode = localStorage.getItem("DarkMode");
    document.getElementById("darkModeToggle").checked = darkMode ? (darkMode == "on") : false;

Answer 3

Просто используйте localStorage для сохранения выбранного режима темы и каждый раз при загрузке страницы проверяйте сохраненное значение, если оно существует.