利用Local Storage跨页面同步数据，实现单详情页展示多歌曲信息

你的核心问题是详情页没有读取URL中携带的歌曲索引，导致无法定位到具体要展示的歌曲。下面是具体修改步骤：

1. 修复detail.js的核心逻辑 #

修改detail.js，先获取URL hash中的歌曲索引，再用这个索引从存储的歌曲数组中取出对应歌曲的数据：

var songJSON = localStorage.getItem("songStoreData");
var Obj = JSON.parse(songJSON);
console.log(Obj);

function addDetails(){
    // 获取URL中的hash值（就是你在index.html里加的歌曲索引）
    // 比如URL是detail.html#0，这里就会得到"0"，转成数字
    var songIndex = parseInt(window.location.hash.slice(1));
    
    // 校验索引是否有效，避免非法访问
    if(isNaN(songIndex) || songIndex < 0 || songIndex >= Obj.songs.length){
        // 索引无效的话跳回列表页
        window.location.href = "index.html";
        return;
    }
    
    // 获取当前要展示的歌曲对象
    var currentSong = Obj.songs[songIndex];

    // 把歌曲数据插入到页面元素中
    document.getElementById('span_header').innerHTML = '<a href="index.html"><img id="btn_product_details_back" src="img/back_white.png">' + currentSong.artist + '</a>';
    document.getElementById('div_product_details_img').innerHTML = '<img src="' + currentSong.image + '">';
    document.getElementById('data_name').innerHTML = currentSong.name;
    document.getElementById('data_genre').innerHTML = currentSong.genre;
    document.getElementById('data_release').innerHTML = currentSong.release;
    document.getElementById('data_duration').innerHTML = currentSong.duration;

    // 这里不需要重新存localStorage，数据没修改
    // localStorage.setItem("songStoreData", Data);
    
    return false;
}
  
addDetails();

2. 修复index.js中的小错误 #

你在生成li元素时，类名的引号写错了，会导致HTML结构错误：
原代码：

'<li class="li_product_"' + i + '">'

修改为：

'<li class="li_product_' + i + '">'

（去掉多余引号，确保类名是li_product_0、li_product_1这类正确格式）

3. 额外优化建议 #

• 简化index.js的存储逻辑，直接用fetch返回的数据渲染，减少localStorage操作：

  fetch('x')
  .then(res => res.json())
  .then(data => {
      // 仅当localStorage无数据时才存储
      if(!localStorage.getItem("songStoreData")){
          localStorage.setItem("songStoreData", JSON.stringify(data));
      }
      // 直接使用fetch到的data，无需重复读取localStorage
      const songs = data.songs;
      for(let i = 0; i < songs.length; i++){
          homeList.innerHTML += '<li class="li_product_' + i + '"><div class="li_product_image"><img src="' + songs[i].image + '"></div><div class="li_product_name"><a href="detail.html#' + i + '">' + songs[i].name + ', ' + songs[i].artist + '</a><br><span class="li_product_duration">' + songs[i].duration + ' minutes</span></div></li>';
      }
  })
  

• 循环中用let i代替全局i，避免变量污染。

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