浏览其他页面时持续暗/亮

Question

这个问题已经被问了很多，但我找不到一个简单的例子来处理我的场景。 我默认设置了一个简单的基本暗模式。 我使用以下内容在两种模式之间切换。

document.querySelector('.theme-switch').addEventListener('click', () => {
  document.body.classList.toggle('light-theme')
})

我需要保存用户选择，以便在导航到其他页面时不会切换回来。 这是我尝试过但无法正常工作的方法。 我究竟做错了什么？

document.querySelector('.theme-switch').addEventListener('click', () => {
   document.body.classList.toggle('light-theme')        
    })

document.addEventListener('DOMContentLoaded', function () {
  const selection = document.querySelector('.theme-switch');

  selection.checked = localStorage.getItem('light-theme') === 'true';
  document.body.classList.toggle('light-theme', selection.checked);

  selection.addEventListener('change', function (event) {
    localStorage.setItem('light-theme', event.currentTarget.checked);
    
  });
});

Answer 1

不幸的是，在 Stack Overflow 中创建工作片段是不可能的，因为 localStorage 在沙盒中是不允许的。

但是您需要做的就是将下面的代码放入您的 DOMContentLoaded 中。

document.body.classList.toggle('light-theme', selection.checked);