Javascript 导航到新页面时，如何使切换开关保持在当前位置？

我在当前项目中有两个切换开关。一个用于暗/亮模式，另一个用于显示/隐藏移动设备上的菜单

我注意到，每当用户刷新页面、单击“返回顶部”箭头或只是导航到新页面时，它们都会重置。这会破坏用户体验，因此我想知道如何让它们一直处于打开或关闭状态，直到用户再次单击它们（或导航离开站点）

下面是一段视频：

下面是代码。我可以添加或更改什么

const body=document.getElementById（'body'）；
const darkModeSwitch=document.getElementById（'darkModeSwitch'）；
const menuSwitch=document.getElementById（'onOffSwitch'）；
const mainNavItems=document.getElementById（'mainNavItems'）；
//单击开关时显示主菜单
menuSwitch.addEventListener（'click'，（）=>{
如果（mainNavItems.style.display==='block'）{
mainNavItems.style.display='none'；
}否则{
mainNavItems.style.display='block'；
}
});
//暗模式
darkModeSwitch.addEventListener（'单击'，（）=>{
让currentBodyClass=body.className；
if（body.className==“lightMode”）{
body.className=“darkMode”；
}else if（currentBodyClass==“暗模式”）{
body.className=“lightMode”；
}
});
#主导航*{
颜色：#FFF；
保证金：0；
}
#主导航{
显示：块；
文本对齐：居中；
填充：10px；
}
#主导航标志{
显示：内联块；
保证金：0自动；
填充：25px0；
字号：1.5em；
}
#主要导航项目{
显示：无；
宽度：40%；
保证金：0自动！重要；
}
#海军部{
边缘底部：15px；
}
#主导航项h2：悬停{
颜色：#db7a3d！重要；
文字装饰：下划线；
}
#开关{
位置：绝对位置；
右：20px；
顶部：20px；
}
#暗模式开关{
位置：绝对位置；
左：20px；
顶部：20px；
}
身体{
保证金：0；
填充：0；
背景:#f3；
}
输入[type=“checkbox”]{
位置：相对位置；
高度：50px；
宽度：25px；
-webkit外观：无；
背景:#塞切奇；
大纲：无；
边界半径：20px；
框阴影：插入0.5pxRGBA（255,0,0,0.2）；
过渡：.25s；
}
输入：悬停{
光标：指针；
}
输入：选中[type=“checkbox”]{
背景#db7a3d；
}
输入[type=“checkbox”]：在{
内容：''；
位置：绝对位置；
宽度：25px；
高度：25px；
边界半径：20px；
排名：0；
左：0；
背景：#ffffff；
转换：比例（1.1）；
盒影：0 2px 5px rgba（0,0,0,0.2）；
过渡：.35s；
}
输入：选中[type=“checkbox”]：之前{
顶部：25px；
}
/*暗模式*/
#暗模式开关{
背景：#fff892；
}
#暗模式开关：选中{
背景：#7575；
}
#黑暗巫师：以前{
背景：#fff；
}
#暗模式开关：选中：之前{
背景：#000；
}
您可以使用保存用户对暗/亮模式和隐藏/显示菜单的首选项。当用户访问页面时，检查他们的首选项，这样您就不会一直覆盖他们的首选项

localStorage.setItem（'mode'，'dark'）；
localStorage.getItem（'mode'）；//你天黑就回来
如何准确地添加此项？我是否需要执行if/else语句或单击事件侦听器？本视频对此进行了说明：