用户离开页面前自动保存播放进度并返回时精准恢复是提升视频体验的关键，需结合visibilitychange、pagehide事件可靠保存，按视频ID隔离存储，等待loadedmetadata后校验时长再跳转，并定期清理过期记录。
用户离开页面前自动保存当前播放进度，返回时从 localStorage 读取并跳转到对应时间点，是提升视频体验的关键细节。核心在于监听播放状态变化、及时写入、精准恢复。
监听页面可见性与卸载时机，可靠触发保存
仅靠 beforeunload 不够稳定（如安卓微信内可能不触发），需结合 visibilitychange 和 pagehide 事件：
-
document.addEventListener('visibilitychange', ...)：标签页切走/切回时捕获，切走瞬间保存进度 -
window.addEventListener('pagehide', ...)：iOS Safari、部分安卓浏览器中更可靠的页面隐藏钩子 - 避免只依赖
beforeunload，它在某些 PWA 或 WebView 中被限制或忽略
按视频 ID 隔离存储，避免多视频冲突
同一页面多个 时，必须用唯一标识区分进度：
- 优先使用
video.id（需确保每个 video 元素有明确 ID） - 若无 ID，可用
video.src的哈希值（如简单取后8位）作为键名，例如：video_progress_${hash(src)} - 存储结构建议：
{ "time": 125.4, "timestamp": 1718234567 }，含时间点和记录时间，便于后续判断是否过期
加载时校验并安全跳转，防止错误定位
恢复播放不能直接 video.currentTime = savedTime，需等待元数据就绪：
- 监听
loadedmetadata事件后再设置currentTime，否则可能无效或报错 - 设置前检查
savedTime ，避免越界导致暂停或黑屏 - 可选：添加
video.play().catch(...)尝试自动续播（注意浏览器自动播放策略限制）
定期清理过期记录，避免 localStorage 膨胀
长期积累的旧进度会占用空间，尤其用户看过的视频较多时：
- 每次保存新进度时，顺带检查其他视频记录的
timestamp，超过 7 天的可removeItem - 或在页面初始化时扫描所有
video_progress_*键，批量清理 - 单条记录通常仅几百字节，但上千条仍可能触及 5MB 上限，需主动管控
不复杂但容易忽略的是事件时机与状态校验——保存太晚可能丢数据，恢复太早会失败，隔离与清理则影响长期稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
