Estoy creando un sitio web para realizar consultas de musica, artistas, canciones. Traigo esa informacion a traves de un archivo JSON local. Cree un evento como funcionalidad para que cuando le haga click se agregue especificamente la cancion que se visualiza en la pagina a una tabla (como en Spotify cuando se agregar un track a la lista de canciones favoritas). Hasta ahi funciona bien. El problema viene que cuando recargo la pagina y vuelvo a realizar una consulta, la información o la cancion a la que le di me gusta desaparece. Por eso empece a utilizar localStorage, pensando que asi se guardaria esa informacion siempre (visualizada en el navegador)
Esta seria la primera funcion, que utilizo para hacer la consulta del JSON donde estan alojadas las canciones
function getSong() {
$formSong.addEventListener("submit", e => {
e.preventDefault()
$loader.style.display = "block"
try {
let songAPI = `./json/TracksExport.json`
let songFetch = fetch(songAPI)
songFetch.then(response => {
return response.json()
}).then(dataSong => {
console.log(dataSong)
let song = e.target.song.value
$loader.style.display = "none";
for (const key in dataSong) {
if (song === dataSong[key].title) {
console.log(dataSong[key].title + " " + dataSong[key].artist)
$defaultText.style.display = "none"
$songContent.innerHTML = `
<div class="contentSong">
<div class="intro">
<h1 class="animate__animated animate__fadeIn card text-bg-success p-3 text-center">Informacion solicitada</h1>
</div>
<h2 style="width: 50%; margin:auto; margin-top: 5px;" class="card text-bg-success p-3 text-center animate__animated animate__fadeIn">Album</h2>
<div class="contentImage d-flex justify-content-center .m-10">
<img class="shadow-lg p-3 bg-body rounded animate__animated animate__fadeIn" src="${dataSong[key].picture}">
</div>
<div class="contentCard d-flex justify-content-center animate__animated animate__fadeIn">
<div class="card text-bg-success p-3 text-dark p-3">
<h2>Song: ${dataSong[key].title}</h2>
</div>
<div class="card text-bg-success p-3 text-dark p-3">
<h2>Artist: ${dataSong[key].artist}</h2>
</div>
</div>
<div class="like">
<i class="iconLike fa-regular fa-heart " id="iconLike"></i>
<h6 class="animate__animated animate__fadeIn card text-bg-success p-3 text-center">Agregar esta cancion a lista de canciones</h6>
</div>
<div class="contentLink">
<a href="${dataSong[key].artistLink}" class="animate__animated animate__fadeIn" target=_blank>Visitar perfil del artista en Spotify</a>
</div>
<div class="alertSong alert alert-success alert-dismissible fade show animate__animated animate__fadeIn" role="alert" id="alertSong">
Se ha agregado a la <strong>lista de canciones</strong>.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alertSongDelete alert alert-danger alert-dismissible fade show" role="alert" id="alertSongDelete">
Se ha eliminado de la <strong>lista de canciones</strong>.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
`
buttonLike()
return;
}else{
console.log("Tracks disponibles: ")
console.log(dataSong[key].title + "-" + dataSong[key].artist)
$defaultText.style.display = "none"
$songContent.innerHTML = `
<div class="intro">
<h1 class="animate__animated animate__fadeIn card text-bg-primary p-3 text-center">¡Lo siento! No se encontro la cancion que buscas</h1>
</div>
`
}
}
})
} catch (error) {
}
})
}
Esta funcion es la que crea el button de like
function buttonLike() {
let butonClick = document.getElementById("iconLike")
let alertSong = document.getElementById("alertSong")
let alertSongDelete = document.getElementById("alertSongDelete")
let $iconLike = document.getElementById("iconLike")
$iconLike.addEventListener("click", () => {
console.log("se activo")
butonClick.classList.toggle('fa-regular')
butonClick.classList.add("animate__animated","animate__rubberBand")
butonClick.classList.toggle('fa-solid')
getTable()
alertSong.style.display = "block"
})
}
Y esta la que genera la tabla al dar me gusta
function getTable() {
let songAPI = `./json/TracksExport.json`
let songFetch = fetch(songAPI)
songFetch.then(response => {
return response.json()
}).then(dataSong => {
let dataString = JSON.stringify(dataSong)
localStorage.setItem("music", dataString)
let music = localStorage.getItem("music");
let musicJSON = JSON.parse(music)
console.log(musicJSON)
musicJSON.forEach(element => {
let song = document.getElementById("cancion")
if(song.value === element.title) {
let tableBody = document.createElement("tbody")
tableBody.innerHTML = `
<thead class="table-dark table-hover">
<td>Track</td>
<td>Artist</td>
<td>Duration</td>
</thead>
<tbody>
<td>${element.title}</td>
<td>${element.artist}</td>
<td>${element.duration}</td>
</tbody>
`
$tableSong.appendChild(tableBody)
}
});
})
}