视频播放器LocalStorage存储异常：已存duration和src但播放器不生效

核心问题 #

你代码里的读取逻辑存在两个关键错误：

• 读取src时错误调用了.src属性：localStorage.getItem("src")返回的是存储的字符串值，不是DOM对象，加.src会导致getSrc变成undefined，直接取返回值即可。
• 设置currentTime的时机不对：如果视频元数据还没加载完成，直接设置播放进度不会生效，需要等视频的loadedmetadata事件触发后再操作。

修正后的代码 #

// 页面卸载时存储数据
window.addEventListener("unload", () => {
  // setItem返回undefined，无需赋值给变量
  localStorage.setItem("duration", mainVideo.currentTime.toString());
  localStorage.setItem("src", mainVideo.getAttribute("src"));
});

// 页面加载时读取数据
window.addEventListener("load", () => {
  const savedDuration = localStorage.getItem("duration");
  const savedSrc = localStorage.getItem("src");

  if (savedSrc) {
    mainVideo.src = savedSrc;
    // 等待视频元数据加载完成后设置播放进度
    mainVideo.addEventListener("loadedmetadata", () => {
      if (savedDuration) {
        mainVideo.currentTime = parseFloat(savedDuration);
      }
    }, { once: true }); // 监听只触发一次，避免重复绑定
  }
});

额外优化细节 #

• 存储duration用toString()比模板字符串更简洁，读取时用parseFloat()确保是数值类型，避免类型问题。
• 变量命名改为语义化名称（如savedDuration），提升代码可读性。
• 事件监听添加{ once: true }配置，防止同一视频多次触发监听逻辑。

内容的提问来源于stack exchange，提问作者boyuna1720