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);

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

1 个答案: