怎么通过HTML5中LocalStorage记录用户对网页版多媒体控制器的全屏显示偏好记忆

用户点击全屏按钮后将偏好存入 localStorage，页面加载时读取并同步UI状态，监听 fullscreenchange 事件实时更新存储，确保状态一致且符合浏览器手势触发要求。

用户点击全屏按钮后，把偏好存进 localStorage，下次加载页面时读取并自动应用全屏状态（或还原为非全屏），就能实现“记忆”效果。关键不是只存状态，而是结合页面生命周期，在合适时机读、写、响应。

1. 存储全屏偏好：点击时记录布尔值

当用户手动触发全屏（比如点“全屏”按钮）或退出全屏（按 ESC 或点“退出全屏”）时，把当前是否处于全屏状态存为 boolean，用有意义的键名：

• 使用 localStorage.setItem('mediaPlayerFullscreen', 'true') 表示用户偏好全屏
• 存 'false' 表示偏好窗口模式（注意：存字符串更稳妥，避免类型混淆）
• 建议统一用小写字符串，避免 true/True 等歧义

2. 页面加载时读取并应用偏好

在 DOM 加载完成（如 DOMContentLoaded）后立即读取，但注意：不能直接调用 requestFullscreen() —— 浏览器要求全屏必须由用户手势触发（如 click），否则会被拒绝。

• 若读到 'true'，可自动显示“已启用全屏”的 UI 状态（如高亮按钮），但不立即全屏
• 真正全屏动作仍需绑定到用户点击事件上，点击时先读 localStorage，再调用 element.requestFullscreen()
• 若读到 'false' 或无值，保持默认窗口尺寸，按钮显示“进入全屏”

3. 监听全屏状态变化，实时同步存储

利用浏览器原生事件监听实际全屏切换，确保存储值与真实状态一致：

立即学习“前端免费学习笔记（深入）”；

• 监听 fullscreenchange（注意拼写，无 on 前缀）事件
• 在回调中通过 document.fullscreenElement 判断是否处于全屏：
  <!-- 示例逻辑 -->
  if (document.fullscreenElement) { localStorage.setItem('mediaPlayerFullscreen', 'true'); }
else { localStorage.setItem('mediaPlayerFullscreen', 'false'); }
• 这样即使用户按 ESC 退出，也能自动更新存储，避免状态漂移

4. 兼容性与清理建议

不同浏览器前缀尚未完全统一，但现代浏览器（Chrome 71+、Firefox 69+、Edge 79+）已支持标准 API；旧版可用 webkitIsFullScreen 或 mozFullScreenElement 回退，但仅需兼容到必要版本。

• 不需要主动清除 localStorage，除非用户明确“重置偏好”
• 可提供一个“恢复默认”按钮，执行 localStorage.removeItem('mediaPlayerFullscreen')
• 注意：LocalStorage 是域名级共享，同一域名下所有页面都可读写，键名避免冲突