使用localStorage保存网页背景色配置及切换逻辑优化咨询

现有代码的优化思路 #

原来的实现直接在JS里硬编码样式，维护成本高，优化方向优先做样式与逻辑分离，用CSS类管理不同主题的样式，减少JS和样式的耦合。

完整实现代码 #

1. CSS代码（主题样式统一管理） #

/* 默认主题，对应你原逻辑state=false时的样式 */
body {
  background-color: #005fff;
  transition: all 0.3s ease; /* 可选：添加切换过渡效果，提升体验 */
}
#title {
  color: lightgreen;
}

/* 红色主题，对应你原逻辑state=true时的样式 */
body.theme-red {
  background-color: red;
}
body.theme-red #title {
  color: blue;
}

2. HTML代码（移除内联onclick事件，符合规范） #

<button id="change">Change background!</button>
<h1 id="title">你的页面标题</h1>

3. JS代码（包含localStorage持久化逻辑） #

const STORAGE_KEY = 'custom_theme';
const changeBtn = document.getElementById('change');

// 页面加载时读取存储的主题并应用
function initUserTheme() {
  const savedTheme = localStorage.getItem(STORAGE_KEY);
  if (savedTheme === 'red') {
    document.body.classList.add('theme-red');
  }
}

// 主题切换逻辑
function handleThemeToggle() {
  const isRedTheme = document.body.classList.contains('theme-red');
  if (isRedTheme) {
    document.body.classList.remove('theme-red');
    localStorage.setItem(STORAGE_KEY, 'default');
  } else {
    document.body.classList.add('theme-red');
    localStorage.setItem(STORAGE_KEY, 'red');
  }
}

// 绑定事件
initUserTheme();
changeBtn.addEventListener('click', handleThemeToggle);

方案优势 #

• 样式全部在CSS中维护，后续修改主题配色、新增主题属性无需调整JS逻辑，扩展性更强
• 无需额外维护全局state变量，直接通过DOM类名判断当前主题状态，避免状态与实际显示不一致的问题
• 用户选择的主题会持久化存储在localStorage中，页面刷新、关闭后重新打开都会自动应用上次选择的主题

内容的提问来源于stack exchange，提问作者Kuba Disko