记住复选框是否在多个 html 文件中选中答案

【问题标题】：Remember if checkbox checked across multiple html files记住复选框是否在多个 html 文件中选中
【发布时间】：2023-02-04 13:28:19
【问题描述】：

我网站的每个页面都有一个复选框，用于切换暗模式，但如果选中它（启用暗模式）并且我更改页面，则该页面默认为精简模式。我想知道是否可以设置它，以便它会记住复选框是否被选中并自动在新页面上选中它，让它记住也很好，所以如果您关闭站点并重新打开它我们将使用您之前选择的模式，但这不是 100% 必要的

<!-- checkbox -->

<input type="checkbox" id="toggle">
<label for="toggle" class="togglebtn">
     <i id="toggle-img" class="fa-solid fa-moon"></i>
</label>

【问题讨论】：

使用 JavaScript 使用 localStorage 或 sessionStorage。 localStorage 意味着即使在浏览器关闭并且用户再次访问您的网站后，您的网站仍可以访问用户离开时使用过的状态（在您的情况下为暗模式或精简模式）。
@NotABot 这正是我需要的，谢谢

标签： javascript html css

【解决方案1】：

这个代码：

function getFromStorage() {
  document.querySelector('#toggle').checked = localStorage.getItem('dark-mode') === 'true'
}

document.querySelector("#toggle").addEventListener("change", ({ target }) => {
  localStorage.setItem('dark-mode', JSON.stringify(target.checked))
})

window.addEventListener("storage", getFromStorage)
getFromStorage()

【讨论】：