To make this short and sweet my code is
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);
}
This all works great and the city that is typed into the search box is stored into the local storage just fine and if page is refreshed I can look in the google chrome app section and see it still in local storage.
After the page refresh tho the app resets to the default landing page.
I'm thinking I need to use something like window.onload = function()
the problem is if I'm setting the storedItem I can't access outside of the getResults function.
any suggestions would be appreciated!
Remove localStorage.setItem("location", searchBox.value); from getResults() and add it to setQuery().
Next, add this to getResults()
let qry = query == undefined ?
localStorage.getItem("location") : query;
This means if there isn't any query passed to getResults(query) then get the value from localStorage under the key "location".
Finally bind the DOMContentLoaded event to document and getResults() as event handler,
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)