Terminé de construir una aplicación meteorológica en línea, usando HTML y JS. Sin embargo, quiero agregar una función de guardado, para que los usuarios puedan guardar y acceder a los nombres de las ciudades (y posiblemente a otros detalles) que han buscado anteriormente. He leído algo sobre localStorage, pero no estoy seguro de cómo implementarlo.

HTML

 <div class="card"> <div class="search"> <input type="text" name="searchbox" class="search-bar" placeholder="Search..."> <button>🔍</button> </div> <div class="weather"> <h2 class="city">Weather in Accra</h2> <div class="temp"><h1>21°C</h1></div> <div class="flex"> <img src="" alt="" class="icon"> <div class="description">Cloudy</div> </div> <div class="humidity">Humid: 53% </div> <div class="wind"> Wind Speed: 6.2 km/h</div> </div> </div> </body> </html>

JavaScript

 let weather = { "apiKey": "", fetchWeather: function(city) { fetch("https://api.openweathermap.org/data/2.5/weather?q="+ city + "&units=metric&appid="+ this.apiKey).then((response) => response.json()).then((data)=> this.displayWeather(data)); }, displayWeather: function(data){ const {name}= data; const {icon, description} = data.weather[0]; const {temp, humidity} =data.main; const {speed} = data.wind; console.log(name,icon,description,temp,humidity,speed); document.querySelector(".city").innerText = "Weather in " + name; document.querySelector(".icon").src = " http://openweathermap.org/img/wn/"+ icon + ".png"; document.querySelector(".description").innerText = description; document.querySelector(".temp").innerText = temp+ "°C" ; document.querySelector(".humidity").innerText = "Humidity " + humidity + "%"; document.querySelector(".wind").innerText = "Wind Speed" + speed + "km/h"; }, search:function(){ this.fetchWeather(document.querySelector(".search-bar").value); }

}

document.querySelector(".botón de búsqueda").addEventListener("clic", function() { weather.search();

})