Para hacer esto corto y dulce, mi código es
const searchBox = document.querySelector(".search-box"); searchBox.addEventListener("keypress", setQuery); function setQuery(e) { if (e.keyCode == 13) { getResults(searchBox.value); searchBox.value = ""; } } function getResults(query) { localStorage.setItem("location", searchBox.value); let storedItem = localStorage.getItem("location"); console.log(storedItem); fetch(`${api.base}weather?q=${storedItem}&units=imperial&APPID=${api.key}`) .then((weather) => { return weather.json(); }) .then(displayResults); }Todo esto funciona muy bien y la ciudad que se escribe en el cuadro de búsqueda se almacena en el almacenamiento local sin problemas y si la página se actualiza, puedo buscar en la sección de la aplicación Google Chrome y verla todavía en el almacenamiento local.
Después de actualizar la página, la aplicación se restablece a la página de inicio predeterminada.
Estoy pensando que necesito usar algo como window.onload = function()
el problema es si estoy configurando el elemento almacenado al que no puedo acceder fuera de la función getResults.
¡cualquier sugerencia sera apreciada!
Eliminar localStorage.setItem("location", searchBox.value); de getResults() y agréguelo a setQuery() .
A continuación, agregue esto a getResults()
let qry = query == undefined ? localStorage.getItem("location") : query; Esto significa que si no se pasa ninguna consulta a getResults(query) , obtenga el valor de localStorage bajo la clave "location" .
Finalmente, vincule el evento DOMContentLoaded al document y getResults() como controlador de eventos,
document.addEventListener('DOMContentLoaded', getResults) const searchBox = document.querySelector(".search-box"); searchBox.addEventListener("keypress", setQuery); function setQuery(e) { if (e.keyCode == 13) { getResults(searchBox.value); localStorage.setItem("location", searchBox.value); searchBox.value = ""; } } function getResults(query) { let qry = query == undefined ? localStorage.getItem("location") : query; console.log(qry); fetch(`${api.base}weather?q=${qry}&units=imperial&APPID=${api.key}`) .then((weather) => { return weather.json(); }) .then(displayResults); }; document.addEventListener('DOMContentLoaded', getResults)