如何根據本地存儲中的數據切換主題

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類中，不要將其設置為空，將本地存儲設置為默認主題，並從初始類的本地存儲中讀取主題值。 因此，在頁面重新加載時，您將從本地存儲中讀取主題，並且將使用自定義主題進行設置。