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

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 类中，不要将其设置为空，而是将本地存储设置为默认主题，并从您的初始类中的本地存储中读取主题值。因此，在页面重新加载时，您也会从本地存储中读取主题，并且已经使用自定义主题进行了设置。