Question

我正在尝试在具有3个不同页面的网站上实施暗模式。我在每个页面上制作了3个单独的javascript文件，并将暗模式代码复制到了每个页面。现在，我想保存首选项，以使用户不必每次访问站点的其他部分时都保持单击暗模式功能。这就是我将其更改为暗模式的原因。我已经看到了使用localStorage的答案，但是我对JS还是陌生的，所以我在实现它时遇到了麻烦。我应该在全部3个页面中只有一个javascript文件还是将其单独保存？

   <label class="switch">
   <input type="checkbox" id="darkmode">
   <span class="slider round"></span>
   </label>


let checkbox = document.getElementById("darkmode");
let body = document.getElementById('body')

checkbox.addEventListener( 'change', function() {
if(this.checked) {
    body.classList.add('dark')
} else {
    body.classList.remove('dark')     
}
});

Answer 1

要实现此目的，您可以执行以下操作：

在每个页面上进行以下更改：


    checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

在加载每个页面时，请执行以下操作：


    if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }

Answer 2

一个简单的技巧是使用window.localstorage（）或cookies（），这将帮助您轻松实现此功能。
有关更多信息，请参见本文MDN Window.localStorage 和MDN cookies.Cookie

实际例子总是可以帮助我们100％
这是执行此操作的更好方法。 https：// codepen.io/Md_Tahazzot/pen/xxKLmJa

如何在多个页面上设置暗模式主题？

2 个答案: