推荐使用 localStorage 存储字符串数组形式的解码器偏好，如["video/webm; codecs=av1", "video/mp4; codecs=avc1"]，仅记录用户手动选择的 MIME 类型顺序，不存检测结果；写入需 try/catch 校验合法性，读取后结合 canPlayType 动态过滤并 fallback，默认值为["video/mp4; codecs=avc1", "video/webm; codecs=vp9"]；跨标签页通过 storage 事件同步。
可以直接用 localStorage 存一个结构清晰的解码器优先级列表，比如按 MIME 类型排序的数组。它不存实际解码能力检测结果，只记用户手动选过的偏好顺序，轻量、可靠、跨刷新生效。
设计合理的存储结构
解码器偏好本质是用户对视频格式的主观倾向（例如更信任 AV1 画质、或因设备卡顿倾向 H.264），不是运行时探测结果。推荐存为字符串数组，语义明确且易于比对：
-
key 固定为
"videoDecoderPreference" -
value 示例：
["video/webm; codecs=av1", "video/mp4; codecs=avc1", "video/webm; codecs=vp9"] - 避免嵌套对象或带版本号的结构——除非你后续要兼容多代策略，否则纯数组最简洁
写入时做基础校验与降级
用户可能传入非法 MIME 字符串，或浏览器不支持 JSON 序列化（如隐私模式）。写入必须包裹 try/catch，并提供默认回退：
- 只接受非空数组，且每个元素是合法字符串（可用
typeof item === 'string' && item.trim()初筛） - 写入前用
JSON.stringify()尝试序列化，失败则不保存，控制台提示并保持旧值或默认值 - 首次访问无记录时，默认可设为
["video/mp4; codecs=avc1", "video/webm; codecs=vp9"]—— 兼顾兼容性与现代性
读取后需主动应用到播放逻辑
localStorage 本身不会触发任何行为。你需要在初始化 <video></video> 元素或调用 MediaSource / canPlayType() 前，把偏好取出并参与格式协商：
- 读取后用
JSON.parse(localStorage.getItem("videoDecoderPreference") || "[]")，加空数组兜底 - 结合
HTMLMediaElement.canPlayType()动态过滤出当前环境真正支持的选项，再按用户排序取第一个可用项 - 若用户偏好全不支持（如只选 AV1 但浏览器未启用），自动 fallback 到默认数组，不中断播放
跨标签页同步与变更响应
用户可能在设置页改了偏好，但播放页没刷新——这时靠 storage 事件通知即可：
- 在播放页监听
window.addEventListener('storage', e => { if (e.key === 'videoDecoderPreference') reloadDecoderStrategy(); }) - 注意：该事件不会在触发修改的当前页触发，所以设置页保存后要同时调用本地应用逻辑（如更新 UI 状态、重试 canPlayType）
- 无需广播复杂对象，数组字符串足够表达意图，事件体轻量无压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
