如何根据本地存储中的数据切换主题

Question

尽管从本地存储中读取主题设置，但我的主题设置始终会恢复为页面刷新时的默认主题

这是我的主题实现代码：

green.addEventListener('click', () => {
  if (localStorage.getItem('theme') != 'green') {
    localStorage.setItem('theme', 'green');
  }
  main.classList.add(localStorage.getItem('theme'));
});
yellow.addEventListener('click', () => {
  if (localStorage.getItem('theme') !== 'yellow') {
    localStorage.setItem('theme', 'yellow');
  }
  main.className = localStorage.getItem('theme');
});
purple.addEventListener('click', () => {
  if (localStorage.getItem('theme') !== '') {
    localStorage.setItem('theme', '');
  }
  main.className = localStorage.getItem('theme');
});

我检查了localStorage并存储了主题值

Answer 1

在Initial类中，不要将其设置为空，将本地存储设置为默认主题，并从初始类的本地存储中读取主题值。 因此，在页面重新加载时，您将从本地存储中读取主题，并且将使用自定义主题进行设置。