如何在localStorage的songs数组中检查YouTube链接是否已存在

核心思路 #

• 从localStorage读取songs数组，处理初始为空的边界情况
• 用Array.some()高效检查重复（找到匹配项立即终止遍历，适配数十至数千条数据的场景）
• 检测到重复则触发提示，未重复则执行原有axios逻辑获取视频信息并存入

完整代码示例 #

1. 封装重复检查函数 #

// 检查目标YouTube链接是否已存在于localStorage的songs数组中
function isSongExists(targetUrl) {
  // 读取本地存储的歌曲列表，不存在则返回空数组
  const storedSongs = JSON.parse(localStorage.getItem('songs')) || [];
  // some()会在找到第一个匹配项后立即停止遍历，性能优于全量遍历
  return storedSongs.some(song => song.url === targetUrl);
}

2. 在表单交互中集成检查逻辑 #

// 假设你的YouTube链接输入框id为yt-link-input
const ytInput = document.getElementById('yt-link-input');

// 监听粘贴事件（也可替换为表单提交事件，根据你的业务流程调整）
ytInput.addEventListener('paste', async (e) => {
  // 获取粘贴的链接并去除首尾空格
  const pastedUrl = (e.clipboardData || window.clipboardData).getData('text').trim();
  
  // 优先执行重复检查
  if (isSongExists(pastedUrl)) {
    // 触发重复提示，可替换为项目内的自定义通知组件（如Toast、Modal）
    alert('该YouTube链接已存在于列表中');
    e.preventDefault(); // 可选：阻止默认粘贴行为，避免重复输入
    return;
  }

  // 未检测到重复，执行原有axios逻辑获取视频信息并存入localStorage
  try {
    // 替换为你的实际视频信息接口请求代码
    const response = await axios.get('/api/get-youtube-info', {
      params: { url: pastedUrl }
    });
    const { songName, songThumbnail } = response.data;
    
    // 更新本地存储的歌曲列表
    const storedSongs = JSON.parse(localStorage.getItem('songs')) || [];
    storedSongs.push({
      url: pastedUrl,
      songName,
      songThumbnail
    });
    localStorage.setItem('songs', JSON.stringify(storedSongs));
    
    // 可选：添加成功提示
    alert('视频信息已成功添加');
  } catch (error) {
    console.error('获取视频信息失败:', error);
    alert('获取视频信息失败，请检查链接是否有效');
  }
});

优化说明 #

• 性能适配：Array.some()的短路遍历特性，在数千条数据的场景下能减少不必要的遍历开销
• 边界处理：默认将localStorage.getItem('songs')返回的null转为空数组，避免调用数组方法时报错
• 扩展性：提示模块可灵活替换为项目中已有的UI组件，无需修改核心检查逻辑

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