有没有办法让复选框在切换到另一个页面后保持相同的状态？答案

【问题标题】：Is there a way I can make a checkbox persist with the same state after switching to another page?有没有办法让复选框在切换到另一个页面后保持相同的状态？
【发布时间】：2020-07-13 20:04:00
【问题描述】：

我实际上已经连续几个小时尝试这样做，但没有得到任何结果。我特别想做的是当用户切换到另一个页面时，我希望暗模式或亮模式（无论他们选择什么）保持不变。

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 编写此代码，否则其他语言也可以。

【问题讨论】：

使用本地存储或 cookie ;)

标签： javascript html checkbox local-storage

【解决方案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>

【讨论】：

能否请您花一些时间查看另一页的代码，其中将接收信息并相应地更改复选框？它似乎并不像现在这样工作。

【解决方案2】：

只需使用 localStorage 保存选定的主题模式，每次页面加载时检查保存的值是否存在。

【讨论】：

【解决方案3】：

您正在存储到localStorage，但无法找回并使用它。您需要在页面加载时添加以下代码：

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

【讨论】：