用 localStorage 实现“最近播放”功能最轻量可靠：以对象数组存歌曲 ID、标题、歌手、封面、时间戳；播放时去重置顶并限长50；加载时倒序渲染；支持跨标签同步与过期清理。
用 localStorage 保存最近播放的歌曲信息，是实现网页音乐播放器“最近播放”功能最轻量、可靠的方式。核心思路是：每次播放一首歌时，把它的关键信息（如 ID、标题、艺术家、封面 URL、播放时间）存入本地；同时控制列表长度（比如最多保留 50 首），并自动去重、置顶最新播放项。
一、设计数据结构：用数组存对象，便于增删查改
推荐将最近播放列表存储为一个对象数组，每个对象包含必要字段：
- id（唯一标识，如歌曲 ID 或 hash 值，用于去重）
- title（歌曲名）
- artist（歌手）
- cover（封面图地址，可选）
- playedAt（播放时间戳，用于排序和判断新旧）
这样结构清晰，后续排序、渲染、查找都方便。避免存成字符串拼接或扁平键值对。
二、播放时更新列表：去重 + 置顶 + 限长
在播放某首歌（例如点击播放按钮或 audio.play() 触发后）执行以下逻辑：
- 从
localStorage读取现有列表（JSON.parse(localStorage.getItem('recentTracks') || '[]')） - 用
id检查是否已存在 —— 若存在，先用filter移除旧记录 - 将当前歌曲对象插入数组开头（
unshift），并更新playedAt: Date.now() - 截取前 N 条（如
.slice(0, 50)），防止无限增长 - 写回 localStorage：
localStorage.setItem('recentTracks', JSON.stringify(list))
三、加载时读取并渲染：按时间倒序显示
页面初始化或进入“最近播放”页时：
- 解析
localStorage.getItem('recentTracks')，若为空或解析失败，用空数组兜底 - 按
playedAt降序排序（确保最新播放在最前）：list.sort((a, b) => b.playedAt - a.playedAt) - 遍历数组，动态生成 DOM（如
...
- 注意：封面图 URL 若含相对路径，需确认在跨页面访问时仍有效（建议存绝对路径或 base64 小图）
四、进阶优化点
让体验更健壮自然：
-
防重复写入：只在用户主动播放（非自动下一首）或音频成功加载后（监听
canplay）再更新，避免误触或加载失败污染列表 -
跨标签同步：监听
storage事件，当其他标签页修改了recentTracks，当前页可自动刷新列表（window.addEventListener('storage', e => { if(e.key === 'recentTracks') updateUI(); })） -
清理过期项：可选地增加有效期逻辑（如只保留 7 天内播放的），遍历时过滤
playedAt -
兼容性兜底：检查
typeof localStorage !== 'undefined'，不支持时静默降级（不保存，也不报错）
不需要后端、不依赖 Cookie，localStorage 就能稳稳撑起“最近播放”这个高频小功能。关键是结构合理、更新及时、读取安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
