应监听 change 事件而非 click 或不存在的 toggle 事件，状态变更时检查值是否真改变再存字符串 'true'/'false'，初始化时用 localStorage 值设置 DOM，跨页同步需监听 storage 事件，写入需 try/catch。
直接用 localStorage.setItem() 配合事件监听就行，但关键在于「什么时候存」和「存什么」——不是所有 toggle 都该立刻写入，比如用户快速点击两次，中间状态不该污染存储。
toggle 事件本身不原生存在，得靠 click 或 change 触发
HTML 中没有原生的 toggle 事件。你实际监听的是按钮的 click、复选框的 change，或者自定义开关（如 ）的状态切换。重点不是事件名，而是「状态变更后立即同步」。
- 用
change比click更稳妥：对 checkbox/radio，change确保值已提交；click可能在用户还没真正切换完时就触发 - 避免重复写入：检查当前值是否真变了，再调
localStorage.setItem()，尤其在初始化时不要覆盖已有值 - 别监听
toggle—— 浏览器不会抛这个事件，写了也收不到
保存布尔值时，localStorage 只认字符串
localStorage 只能存字符串，true / false 会自动转成 "true" / "false"，但读取时不会自动转回布尔，必须手动解析。
- 存的时候：用
localStorage.setItem('darkMode', String(checked))或直接checked ? 'true' : 'false' - 读的时候：不能只靠
localStorage.getItem('darkMode') === 'true'，因为值可能是null或空字符串，得加判空 - 更安全的读法：
const isDark = localStorage.getItem('darkMode') === 'true'，前提是写入时严格用'true'/'false'
页面加载时别用 getItem() 覆盖 DOM 初始状态
如果 HTML 中 checkbox 已带 checked 属性，而 JS 又在 onload 后强行从 localStorage 读值并设 elem.checked = xxx，可能造成视觉闪动或状态错位。
- 推荐做法：先读 localStorage，再用它去初始化 DOM，而不是反过来
- 例如，把
的checked属性去掉，全由 JS 控制 - 初始化代码要放在 DOM 加载完成后（
DOMContentLoaded），且在绑定事件监听之前执行
跨页面同步要用 storage 事件监听
localStorage 修改不会触发当前页面的 storage 事件，只会在**其他同源 tab 页面**中触发。所以单页应用里不用管它；但如果你有多个页面共用同一套主题开关，就得监听 storage 事件来响应外部变化。
- 监听方式：
window.addEventListener('storage', (e) => { if (e.key === 'darkMode') { /* 更新当前页 UI */ } }) - 注意：
e.newValue是字符串，e.oldValue可能为null（首次设置时） - 这个事件不会在触发修改的页面自身运行，所以不能用来“确认自己存成功了”
最易被忽略的是：localStorage 写入是同步阻塞的，但在某些低配设备或大量写入时仍可能出错；生产环境建议包一层 try/catch，至少避免因存储失败导致整个 toggle 功能瘫痪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
