localstorage 可在音乐播放器中持久保存并恢复播放状态，需在切换歌曲、定期更新、暂停/拖动及页面卸载前写入；推荐用 json 对象存储，恢复时按顺序校验 id、加载资源、等待元数据后设置时间与播放状态，并注意异常处理与清理。
LocalStorage 可以在音乐播放器中持久保存用户上次播放的歌曲 ID 和播放进度（单位：秒），页面刷新或重新打开后读取并自动恢复播放。
保存播放状态的关键时机
需要在几个关键节点主动写入 LocalStorage：
- 切换歌曲时，保存新歌曲的唯一标识（如 songId）和初始进度 0
- 播放过程中定期保存进度（例如每 5 秒更新一次），避免关闭页面前最后一段进度丢失
- 用户手动暂停或拖动进度条后，立即保存当前时间点
- 页面卸载前（
beforeunload）再做一次兜底保存，提高可靠性
存储结构建议用对象而非字符串
推荐将数据组织为一个 JS 对象，再用 JSON.stringify() 存入 LocalStorage，便于扩展字段：
{
"currentSongId": "song_123",
"currentTime": 42.6,
"isPlaying": false
}
这样比分别存多个 key 更易维护，也方便后续加音量、循环模式等字段。
恢复播放逻辑要分步处理
初始化播放器时，先读取 LocalStorage 数据，再按顺序执行：
- 检查是否存在有效 currentSongId，若无则不恢复，走默认逻辑
- 加载对应歌曲资源（可提前触发网络请求，避免卡顿）
- 设置 audio.currentTime 后，需等待
loadedmetadata事件后再调用play()，否则部分浏览器会失败 - 若原状态是播放中（isPlaying: true），且当前时间 > 0，则自动调用
play()
注意兼容性与清理边界
LocalStorage 有容量限制（通常 5–10MB），但更重要的是业务层面的健壮性：
- 每次读取后用
try...catch包裹JSON.parse()，防止存储损坏导致整个恢复逻辑崩溃 - 歌曲下架或链接失效时，应主动清除对应记录，避免下次启动卡在无效 ID 上
- 用户切换账号或点击“清空播放记录”时，记得调用
localStorage.removeItem("playerState") - 移动端 Safari 在无痕模式下会抛出 QuotaExceededError，可用
try/catch降级为内存缓存
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
