0

Tengo un problema con mi trabajo de conversor de monedas y es que cuando mando a recuperar los datos del localStorage para que se muestren en el DOM al recargar la página no quedan ahi y se desaparecen, la función es la siguiente:

//Datos de inputs
const primerDivisa = document.getElementById('primer-divisa')
const segundaDivisa = document.getElementById('segunda-divisa')
const ul = document.querySelector('.lista-resultados')

function calcular() {
  const primerMonedaIngresada = primerDivisa.value 
  const segundaMonedaIngresada = segundaDivisa.value

// Los datos que se almacenan son de una API que me da valores de distintas divisas

  fetch(`https://v6.exchangerate-api.com/v6/58f679169d6ab2828a7dcda0/latest/${primerMonedaIngresada}`)
  .then(res => res.json())
  .then(data => {
    const taza = data.conversion_rates[segundaMonedaIngresada]
    infoDeCambio.innerHTML = `<b>1 ${primerMonedaIngresada}</b> es igual a: <b>${taza.toFixed(2)} ${segundaMonedaIngresada}</b>`
    segundoValor.value = (primerValor.value * taza).toFixed(2)

        botonConvertir.addEventListener('click', botonClick)
      })
    }

Esta es la funcion que muestra el código en el DOM y a la vez los almacena en localStorage. ¿Que estoy haciendo mal? :(

//MOSTRAR CONTENIDO EN EL DOM
function botonClick() { 
  const li = document.createElement('li')
  li.classList = 'lista'
  const agregarEnLista = ul

  li.innerHTML = `La conversión de <b>$${primerValor.value} ${primerDivisa.value}</b> es igual a: <b>$${segundoValor.value} ${segundaDivisa.value}</b>`

  agregarEnLista.appendChild(li)
  li.appendChild(borrarResultados())
  almacenarEnLocal.push(li.innerHTML)

  almacenarEnStorage()
}

  //AGREGAR CONTENIDO AL LOCALSTORAGE
function almacenarEnStorage() {
  let resultados = JSON.stringify(almacenarEnLocal)
  localStorage.setItem("Conversiones", resultados) // <= ARREGLO ALMACENADO EN EL LOCALSTORAGE

  document.addEventListener('DOMContentLoaded', () => { //RECUPERAR DATOS DEL LOCALSTORAGE
    obtenerLista.forEach( function(elementoLista) {
      botonClick(elementoLista)
    })
  })
}
4
  • ¿Puedes agregar imágenes de los datos obtenidos que se están guardando en el localStorage? Y así verificamos que están pasando los datos a esa función almacenarEnStorage(). También por lo menos puedo notar que si, le puedes retornar los datos al front, pero requieres tenerlos en formato de JSON y así podrás pintarlos en el front.
    – Dabydat
    Commented el 16 ago. 2022 a las 18:22
  • Por si te interesa este es el repositorio del proyecto :) github.com/MartinVijarra/conversor-de-divisas Commented el 16 ago. 2022 a las 19:06
  • tu código de DOM jamás lee de localStorage, en todo el código que muestras solo veo que escribes no que lees
    – LPZadkiel
    Commented el 16 ago. 2022 a las 19:41
  • ¿Cómo se inicializa/asigna obtenerLista? A parte de en la función almacenarEnStorage, ¿en dónde más se realiza esa iteración de obtenerLista? Commented el 17 ago. 2022 a las 3:20

1 respuesta 1

0
  • En primera instancia para agregar en el localStorage, si, con el método que estás colocando 'setItem'
  • Ahora para obtener esos datos es con el método 'getItem'

Ejemplo de guardado en el LocalStorage:

const meses = ['Enero','Febrero','Marzo'];
localStorage.setItem('meses', JSON.stringify(meses))

Ejemplo de obtención de esos datos guardados en el LocalStorage y en formato JSON:

const mesesArray = JSON.parse(localStorage.getItem('meses'))

Así puedes obtenerlos en el front, y pintarlos donde quieras.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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