用 localStorage 存布尔值需严格类型处理：存时用 JSON.stringify()，读时用 JSON.parse() 容错，尽早执行防 FOUC，监听 storage 事件跨页同步，并做环境兼容与降级兜底。
直接用 localStorage 存一个布尔值即可，但关键在于写得稳、读得准、切得快——尤其自动播放这类影响首屏体验的设置，不能闪、不能错、不能跨标签页不同步。
存开关状态：只存 true/false，别存字符串或数字
用户点击“开启自动播放”时，存 true；关闭时存 false。务必用 JSON.stringify() 转为字符串再写入，否则 localStorage.setItem("autoPlay", false) 实际存的是字符串 "false"，取出来再判断就容易出错。
-
正确写法：
localStorage.setItem("autoPlay", JSON.stringify(true)) -
错误写法：
localStorage.setItem("autoPlay", false)（存成字符串"false"，后续JSON.parse()才能还原） - 避免用
"on"/"off"或1/0，增加类型转换成本和歧义风险
读取并立即应用：防 FOUC，不等 DOMContentLoaded
自动播放开关通常控制 <video></video> 或 <audio></audio> 的 autoplay 属性。如果 JS 在页面渲染后才读取并设置，用户会看到媒体组件先静默加载、再突然播放——这就是 FOUC（样式闪动）的音频版。解决办法是尽早执行：
- 把读取逻辑放在
内的<script></script>中，或确保在媒体元素创建前完成 - 读取时加容错：
const autoPlay = JSON.parse(localStorage.getItem("autoPlay") || "false") - 拿到值后，立刻给媒体元素设
element.autoplay = autoPlay，而不是等事件或渲染完成
同步 UI 控件与跨标签页响应
假设你用一个 <input type="checkbox"> 表示开关，需双向联动：
立即学习“前端免费学习笔记（深入）”；
-
初始化时：读取 localStorage 值，设 checkbox 的
checked属性，并同步 media 元素行为 -
用户操作时：监听
change事件，更新 localStorage 并立即应用到当前页所有媒体元素 -
其他标签页响应：监听
storage事件，当别的标签页修改了"autoPlay"，本页也同步 checkbox 状态和媒体行为（注意：触发修改的标签页自身不会收到该事件）
兜底与边界处理
不是所有环境都支持 localStorage，尤其 Safari 无痕模式或某些企业浏览器策略下可能被禁用：
- 读写前先检测：
if (typeof localStorage !== "undefined") { ... } - 写入失败（如配额超限）时捕获
QuotaExceededError，降级为内存变量暂存：let fallbackAutoPlay = true - 首次访问无存储时，默认设为
false（更尊重用户注意力），而非强行开启自动播放 - 绝不存敏感信息——自动播放开关本身无风险，但不要顺手把 token、用户 ID 等一起塞进同个 key
