0

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)
            }
        });
        
    })
}
3
  • Demasiado código, debe poner un ejemplo mínimo además de indicar exactamente el problema
    – Yussef
    el 27 ene. a las 5:36
  • No entiendo muy bien lo que quieres hacer. Pero lo que si es que estas utilizando mal el storage. Cuando usas el setitem, no añade algo a lo que hay, lo reemplaza(si tiene el mismo nombre la propiedad, claro). Así que creo que deberías hacer es que cuando hace click en el botón 'like' deberías añadir esa canción al storage y en la función gettable deberías solo recuperar las canciones del storage y mostrarlas y no lo que estás haciendo, que es guardar todas las canciones del archivo json y luego recuperarlas (no tiene sentido esto)
    – Suso
    el 27 ene. a las 7:39
  • Quiza me extendi demasiado compartiendo todo mi codigo. Basicamente estaria necesitando poder agregar un nuevo objeto a localStorage a partir de un evento tipo click. Digo un objeto por que ahi es donde guardaria la informacion para despues recorrerlo con un ciclo e imprimirla en el navegador. O eso es lo que se me ocurrio por ahora. el 30 ene. a las 3:11

1 respuesta 1

1

Como mencionaron en los comentarios, estas haciendo un uso incorrecto o desinformado de localStorage.

De manera simple, lo que necesitas tener en mente, que lo que planteas, es guardar un listado o colección de canciones. Por lo tanto para poder hacer eso es recomendable recurrir al uso de un Arreglo ([]).

Todo lo que se almacena en localStorage tiene el comportamiento de un Mapa/Diccionario, por lo tanto hace del uso de una 'clave' y un 'valor'.

Y algo muy importante, es que todo, pero absolutamente todo en localStorage, tanto la 'clave' como el 'valor' son Strings (cadenas de caracteres). Por lo cual JSON.parse() y JSON.stringify() son requeridos casi siempre para su uso.

Prosiguiendo con tu problemática sería necesario tener un arreglo (vacío al inicio en el caso de mi ejemplo) con una clave con la cual siempre accedamos, que en este caso vamos a decir que es 'canciones'.

Para generar el Arreglo vacío en el 'localStorage' vamos a realizar lo siguiente:

const canciones = [];
localStorage.setItem('canciones', JSON.strigify(canciones)) //Almacenamos en localStorage el siguiente registro: {'canciones' : '[]'}.

Especial atención al uso del JSON.strigify() y que lo que se almacena no es un [] sinó la cadena/string '[]'.

Podrías hacer dos funciones especiales una cada vez que quieras obtener los datos de las canciones para utilizar

function getCanciones() {
    const canciones = localStorage.getItem('canciones'); // Si estaba vacío retorna '[]'.
    return JSON.parse(canciones) //Retorna en el caso de esta vacío un [] y no '[]' ya que se utiliza JSON.parse()

Por otro lado podríamos hacer una función que agregue canciones al listado (únicamente al localStorage).

function addCancion( cancion ) {
    const canciones = localStorage.getItem('canciones'); // Si estaba vacío retorna '[]'.
    const cancionesArreglo = JSON.parse(canciones) // Se transforma a un objeto/arreglo utilizable en JavaScript, lo cual nos habilita a poder utilizar sus métodos.
    cancionesArreglo.push(cancion) // Agregamos la canción recibida por parámetros.

    // Tener en cuenta que en localStorage solo tendríamos el viejo valor asociado a nuestra clave 'canciones', por lo tanto ahora debemos reescribirlo 

con el valor actualizado.

    localStorage.setItem('canciones', JSON.strigify(cancionesArreglo)) // Al hacer esto ahora en el localStorage poseeremos el siguiente registro: {'canciones' : '[ cancion1 ]'}.

Y de esta forma se va trabajando con localStorage, siempre recordando modificar los registros y recordando que todo lo almacenado en él es texto/string.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.