1

quisiera saber como tomar con un Select los valores que agregue en el LocalStorage, y que este Select despliegue esos valores adiquiridos

Esto es el html donde basicamente quiero que ese Select tome los valores del LocalStorage y cree Options al cargar la pagina.

   <main>
            <h2>El Clima Ahora</h2>
            <section id="form-city-list">
                <form id="form">
                    <select name="city" id="city" onload="cargarDatos()">
                        <option value="" disabled selected>Seleccionar ciudad</option>
                    </select>
                    <button id="consult">Consultar</button>
                </form>
            </section>
    

Esto es en el js. Es una funcion que encontre para cargar datos desde el LocalStorage pero no me funciona.

    function cargarDatos(){
        let cities = localStorage.getItem("CITIES");
            if (cities) {
                cities = JSON.parse(cities);
            } else {
                cities = [];
            }
            return cities;
    }

   
2
  • 1
    ¿En qué formato estás guardando las ciudades y qué quieres mostrar? Tu código actual sólo hace un parse, pero nada más y el if ... else no tiene sentido.
    – A. Cedano
    Commented el 31 oct. 2022 a las 14:56
  • cities no es un booleano. Commented el 31 oct. 2022 a las 15:00

1 respuesta 1

0

Desde tu función, tendrías crear los option que resultasen de la lectura de las ciudades almacenadas y asignarlos al select, alcazándolo por su id.

Imaginemos que almacenas las ciudades como objetos, con dos propiedades, id y name, puedes poner algo así en tu función:

VER DEMO

let allCities = JSON.parse(localStorage.getItem("cities"));
if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Imaginemos que tus ciudades son un elemento simple, la función podría quedar así:

VER DEMO

let allCities = JSON.parse(localStorage.getItem("CITIES"));

if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    fragment.append(option);
  }
  selCity.append(fragment);
}

PD

Nótese que hemos usado un fragmento, para hacer append de cada option y sólo al final del bucle hacemos append de ese fragmento en el select. Esta es la práctica recomendada cuando modificamos elementos en bucle, porque si haces append directamente en cada iteracción, el DOM se renderizará en cada append. Hemos usado también createElement porque es el modo más seguro de crear elementos dinámicos, evitando posibles ataques XSS.

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.