HTML5 LocalStorage存储网页多媒体全屏偏好设置方法

想要让网页版的多媒体控制器记住用户的全屏偏好？其核心原理非常直接：当用户点击全屏按钮后，将这个偏好存入 localStorage；待页面再次加载时，读取存储值并同步UI状态；同时，监听浏览器的 fullscreenchange 事件来实时更新存储。这套组合方案能有效确保状态一致性，并且完全遵循浏览器的安全要求——全屏切换必须由用户手势触发。

简而言之，核心思路是：在用户手动操作时记录状态，在页面初始化时恢复UI，并通过事件监听保持存储值与实际状态同步。关键在于如何将存储行为巧妙地融入页面生命周期——在恰当的时机进行读取、写入和响应。

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

当用户通过界面按钮手动触发全屏，或按ESC键、点击“退出全屏”按钮时，是记录偏好的最佳时机。此时，将当前的是否全屏状态作为一个布尔值存储。

• 使用 localStorage.setItem('mediaPlayerFullscreen', 'true') 表示用户偏好全屏模式。
• 存储 'false' 则表示用户倾向于窗口模式。注意：存储为字符串比布尔值更稳妥，可避免后续读取时的类型混淆。
• 建议统一使用小写字符串（如 ‘true‘/‘false‘），以避免 true、True 或 TRUE 等不一致写法带来的歧义。

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

在DOM加载完成（例如监听 DOMContentLoaded 事件）后，即可读取存储的偏好。但需注意一个重要限制：不能直接调用 requestFullscreen() 方法。浏览器出于安全考虑，要求全屏操作必须由明确的用户手势（如点击）触发，否则调用会被拒绝。

• 若读取值为 'true'，可自动将UI状态更新为“已启用全屏”，例如高亮全屏按钮，为用户提供视觉提示。
• 真正的全屏动作仍需绑定到用户的点击事件上。在点击事件处理函数中，先读取 localStorage 的值，再决定是否调用 element.requestFullscreen()。
• 若读取到 'false' 或未存储过任何值，则保持默认窗口尺寸，按钮显示为“进入全屏”状态。

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

为确保存储值始终与浏览器的真实全屏状态一致，需要利用浏览器原生的事件监听机制。

• 监听 fullscreenchange 事件（注意事件名没有 ‘on‘ 前缀）。
• 在事件回调函数中，通过检查 document.fullscreenElement 属性来判断当前是否处于全屏状态。示例逻辑如下：
  if (document.fullscreenElement) { localStorage.setItem('mediaPlayerFullscreen', 'true'); }
else { localStorage.setItem('mediaPlayerFullscreen', 'false'); }
• 这样，即使用户未通过你的按钮，而是直接按键盘ESC键退出全屏，存储值也会被自动更新，有效避免了UI状态与存储值之间出现“漂移”。

兼容性与清理建议

虽然现代浏览器（Chrome 71+、Firefox 69+、Edge 79+）已支持标准的 Fullscreen API，但不同浏览器间的前缀问题仍需留意。对于需要兼容的旧版本，可能还需检测如 webkitIsFullScreen 或 mozFullScreenElement 等属性，具体取决于你需要支持的版本范围。

• 通常无需主动清理 localStorage，除非产品提供了明确的“重置偏好”功能。
• 可提供一个“恢复默认设置”按钮，其逻辑是执行 localStorage.removeItem('mediaPlayerFullscreen')。
• 最后请注意：LocalStorage 的作用域是域名级别，同一域名下的所有页面均可读写。因此，键名选择要足够具体，避免与其他功能模块的存储发生冲突。