HTML本身不支持场景模式切换，需HTML+JavaScript（配合CSS）实现：JS管理状态、响应点击、更新DOM；CSS控制视觉反馈；localStorage持久化当前模式，避免刷新丢失。
HTML 本身不支持“场景模式切换”这种带状态管理、用户交互和逻辑判断的功能——它只是静态标记语言。所谓“智能场景模式切换面板”，实际是 HTML + JavaScript（常配合 CSS）共同实现的前端交互效果，核心在 JS 控制状态与 DOM 更新。
什么是「场景模式」？先理清需求边界
“场景模式”不是浏览器标准概念，而是业务抽象：比如「居家」「离家」「睡眠」「观影」等预设状态，每种状态对应一组设备开关、亮度、色温等参数。HTML 负责画出面板按钮和状态显示区；JavaScript 负责记住当前模式、响应点击、触发后续动作（如发 API、改 class、更新表单值）。
常见错误现象：点击按钮没反应、切换后样式不变、刷新页面丢失当前模式。
- 必须用
data-scene或id标识每个模式按钮，不能只靠文字内容判断 - 模式状态建议存到
localStorage，否则刷新即丢 - 避免直接操作内联
style，优先用classList.toggle()切换预设 CSS 类
用 dataset + addEventListener 绑定模式切换
不要用 onclick="switchScene('sleep')" 这类内联 JS，不利于维护和复用。推荐为所有模式按钮统一加 data-scene 属性，再用事件委托监听：
立即学习“前端免费学习笔记（深入）”；
<div id="scene-panel"> <button data-scene="home">居家</button> <button data-scene="away">离家</button> <button data-scene="sleep">睡眠</button> </div>
JS 部分：
const panel = document.getElementById('scene-panel');
let currentScene = localStorage.getItem('currentScene') || 'home';
panel.addEventListener('click', (e) => {
if (e.target.matches('button[data-scene]')) {
const scene = e.target.dataset.scene;
applyScene(scene);
}
});
function applyScene(scene) {
// 移除旧模式 class
document.body.classList.remove(`scene-${currentScene}`);
// 添加新模式 class
document.body.classList.add(`scene-${scene}`);
// 记录到本地存储
localStorage.setItem('currentScene', scene);
currentScene = scene;
}
CSS 怎么配合实现「视觉反馈」和「设备联动效果」
仅靠 JS 切换 class 不够，得有对应 CSS 规则才能看到变化。例如：
.scene-sleep { background: #1a1a2e; }
.scene-sleep .light-control { opacity: 0.3; }
.scene-sleep .tv-control { display: none; }
.scene-home .light-control { opacity: 1; }
关键点：
- 每个
scene-xxx类应只控制「视觉表现」或「基础 DOM 可见性」，不负责调用设备 API - 若需真实控制硬件（如 IoT 设备），
applyScene()内部应触发fetch()或 WebSocket 消息，而不是只改样式 - 避免在 CSS 中写过于具体的像素值（如
width: 243px），优先用相对单位或 flex/grid 布局适配不同屏幕
为什么 localStorage 有时不生效？检查这三点
localStorage.setItem() 失败通常不是代码写错，而是环境限制：
- 页面运行在
file://协议下（双击打开 HTML 文件）→ 浏览器禁止读写localStorage，必须起本地服务（如npx serve或 VS Code Live Server） - 用户开启了无痕模式或禁用了第三方 Cookie/存储 →
localStorage被静默禁用，需加 try-catch 并降级到内存变量 - 存入值超过 5MB 限制（多数浏览器）→ 改用
sessionStorage或服务端持久化
真正难的不是切按钮，是让“模式”在页面刷新、多标签页、甚至跨设备间保持一致——那已经超出纯 HTML+JS 范畴，需要后端同步或 WebRTC/P2P 协作。
