可直接用 localStorage 保存静音状态布尔值，页面加载时读取并同步播放器 muted 属性及按钮 UI，点击时切换状态并持久化；需封装 UI 更新逻辑，加 try-catch 处理 localStorage 不可用情况。
可以直接用 localStorage 保存静音状态（布尔值），每次页面加载时读取并同步控制器 UI，点击静音按钮时更新存储和播放器状态。
初始化时读取并应用静音状态
页面加载后，检查 localStorage 中是否有 "isMuted" 键，有则解析为布尔值，并设置音频/视频元素的 muted 属性，同时更新按钮图标或文案：
document.addEventListener('DOMContentLoaded', () => {
const player = document.getElementById('myPlayer');
const muteBtn = document.getElementById('muteToggle');
const isMuted = localStorage.getItem('isMuted') === 'true';
player.muted = isMuted;
updateMuteButton(muteBtn, isMuted);
});
点击按钮时切换并持久化状态
给静音按钮绑定点击事件，切换当前静音状态，同步更新播放器、UI 和 localStorage：
muteBtn.addEventListener('click', () => {
const player = document.getElementById('myPlayer');
const isCurrentlyMuted = player.muted;
player.muted = !isCurrentlyMuted;
localStorage.setItem('isMuted', String(!isCurrentlyMuted));
updateMuteButton(muteBtn, !isCurrentlyMuted);
});
封装 UI 同步逻辑（推荐）
把按钮样式/文案更新抽成独立函数，避免重复代码。例如根据是否静音显示不同图标或文字：
- 用
muteBtn.textContent = isMuted ? '取消静音' : '静音' - 或通过 class 切换：
muteBtn.classList.toggle('muted', isMuted)配合 CSS 控制图标 - 确保该函数在初始化和点击时都被调用，保持状态一致
注意兼容性与边界情况
localStorage 在无痕模式或禁用 Cookie 的浏览器中可能抛出异常，建议加 try-catch：
- 写入前检查
localStorage是否可用：if (typeof localStorage !== 'undefined') - 读写操作包在
try...catch中，失败时回退到默认状态（如非静音） - 不要存复杂对象；布尔值转字符串（
String(true)→"true"）再存，读取时严格用=== 'true'判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
