i'm trying to use localstorage to append recent city searches from user to a form element. The problem is now im very unsure of how to progress further if .innerHTML wipes out all text when it's putting anything into the element. the end goal would be for the form element to look something like
any ideas on how to implement this?
new to local storage so would appreciate any help here's an example of the code :)
// HTML
<form class="recent-search" id="demo"></form>
// JAVASCRIPT
function setStorage() {
// here i'm trying to store nameValue to localstorage
localStorage.setItem('', nameValue);
}
setStorage()
function getValue() {
// now i'm getting nameofcity from localstorage
return localStorage.getItem('nameofcity');
}
// console logging it so i can make sure it's working (it is)
console.log(getValue());
function myFunction() {
// now i set the innerHTML of the element with the ID of "demo" to be "1. "nameofcity"
document.getElementById("demo").innerHTML = '1. ' + localStorage.getItem('nameofcity');
}
myFunction();
if you'd like more context heres the github repository https://github.com/LukeMcHenry311/Server-Side-Weather
You're saving the value to the key of an empty string and then trying to retrieve the key of nameofcity, which you probably didn't save it to. localStorage works by key-value pairs. You can always go to your browser's dev tools (usually by hitting F12), and under Application tab you can see what's in your local storage
It should be something like
function setStorage() {
localStorage.setItem('nameofcity', nameValue);
}