Using local storage to sync data across pages

Question

I'm very new to JS and I'm trying to sync the listing data by using local storage example below:

https://i.stack.imgur.com/0r6wq.jpg

• Song 1 -> Song 1 Detail page
• Song 2 -> Song 2 Detail page
• Song 3 -> Song 3 Detail page

There will be only one detail page associated with the 3 listings.

Anyway to achieve this without creating multiple pages for the individual detail listing?

index.js

fetch('x')
        .then(function(res) {
            return res.json();
        })
        .then(function(data) {

            var Data = JSON.stringify(data);
            if (localStorage.getItem("songStoreData") === null || typeof localStorage.getItem("songStoreData") === "undefined") {
                localStorage.setItem("songStoreData", Data);
            }
            //get the stored data 
            var songJSON = localStorage.getItem("songStoreData");
            //parse the data to JSON
            var Obj = JSON.parse(songJSON);
            //for debugging
            console.log(Obj);

            for (i = 0; i < Obj.songs.length; i++) {

                homeList.innerHTML +=
                    '<li class="li_product_"' + i + '"><div class="li_product_image"><img src="' + Obj.songs[i].image + '"></div><div class="li_product_name"><a href="detail.html#' + i + '">' + Obj.songs[i].name + ', ' + Obj.songs[i].artist + '</a><br><span class="li_product_duration">' + Obj.songs[i].duration + ' minutes</span></div></div></li>';



            }
        })

detail.js

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


function addDetails(){
  
  document.getElementById('span_header').innerHTML = '<a href="index.html"><img id="btn_product_details_back" src="img/back_white.png">' + Obj.songs.artist + '</a>';
  document.getElementById('div_product_details_img').innerHTML = '<img src="' + Obj.songs.image + '">';
  document.getElementById('data_name').innerHTML = Obj.songs.name;
  document.getElementById('data_genre').innerHTML = Obj.songs.genre;
  document.getElementById('data_release').innerHTML = Obj.songs.release;
  document.getElementById('data_duration').innerHTML = Obj.songs.duration;

  var Data=JSON.stringify(Obj);
  //store the string format data in local storage
  localStorage.setItem("songStoreData", Data);
  //window.location='index.html'; 
  
  return false;
}
  
  addDetails();