用户点击全屏按钮后将偏好存入 localstorage，页面加载时读取并同步ui状态，监听 fullscreenchange 事件实时更新存储，确保状态一致且符合浏览器手势触发要求。
用户点击全屏按钮后，把偏好存进 localStorage，下次加载页面时读取并自动应用全屏状态（或还原为非全屏），就能实现“记忆”效果。关键不是只存状态，而是结合页面生命周期，在合适时机读、写、响应。
1. 存储全屏偏好：点击时记录布尔值
当用户手动触发全屏（比如点“全屏”按钮）或退出全屏（按 ESC 或点“退出全屏”）时，把当前是否处于全屏状态存为 boolean，用有意义的键名：
- 使用
localStorage.setItem('mediaPlayerFullscreen', 'true')表示用户偏好全屏 - 存
'false'表示偏好窗口模式（注意：存字符串更稳妥，避免类型混淆） - 建议统一用小写字符串，避免
true/True等歧义
2. 页面加载时读取并应用偏好
在 DOM 加载完成（如 DOMContentLoaded）后立即读取，但注意：不能直接调用 requestFullscreen() —— 浏览器要求全屏必须由用户手势触发（如 click），否则会被拒绝。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若读到
'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 是域名级共享，同一域名下所有页面都可读写，键名避免冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
