Array empties when action taken on returning to the page the array was created

Question

A user can search for a location. This is then stored in local and session storage for different reasons. They search using this html:

<input type="text" name="city" class="city" placeholder="City Name">
<button class="submitLocation">Set location</button></br>

The result is shown below the search box. As they search for other names, these too are added to li elements as results, using a for loop.

The user can go from page to page and these details are stored as is intended.

On returning to the same page, the results are shown, as I am placing this outside of the original function:

document.getElementById("historyList2").innerHTML = JSON.parse(localStorage.getItem("weather"));

(I would prefer to display the results in a list on return to the page as I do within the function). But, what may sort that problem is addressing the main problem which occurs when you search again upon returning to the page. When this happens the array returns to empty because var weather = [];.

var weather = [];
var weatherLength;
var text;
var i;

function showCurrent(currentWeather) {

// for the for loop
weather.push( currentWeather.name );


    if (typeof(Storage) !== "undefined") {

        // Store
        //saves name/s in local storage (for histoy list)
        localStorage.setItem("weather", JSON.stringify( weather ) );

        //saves name in session storage for current use
        sessionStorage.setItem("name", currentWeather.name);

        // Retrieve
        // Retrieves name from session storage 
        document.getElementById("name").innerHTML = sessionStorage.getItem("name");

        // bring back list of previous locations
        weatherLength = weather.length;
        text = "<ul>";
        for (i = 0; i < weatherLength; i++) {
            text += "<li class='city'>" + weather[i] + "</li>";
        }
        text += "</ul>";

        //outputs result as list
        document.getElementById("historyList").innerHTML = text;

        //outputs result as string
        var storedLocations = document.getElementById("historyList2").innerHTML = JSON.parse(localStorage.getItem("weather"));


  }
    else {
        document.getElementById("error").innerHTML = "Sorry, your browser does not support Web Storage...";
    }

}

//need to put here to display results on return to page
document.getElementById("historyList2").innerHTML = JSON.parse(localStorage.getItem("weather"));

OUTPUTS:

document.getElementById("historyList").innerHTML = text; gives this:

<div id="historyList">
    <ul>
        <li class="city">London</li>
        <li class="city">Manchester</li>
        <li class="city">Glasgow</li>
    </ul>
</div>

document.getElementById("historyList2").innerHTML = JSON.parse(localStorage.getItem("weather")); gives this:

<div id="historyList2">London,Manchester,Glasgow</div>

Answer 1

You can replace

var weather = [];

with

var weather = localStorage.getItem("weather") === null ? [] : JSON.parse(localStorage.getItem("weather"));

Had asked for sample output to be able to help with more specific code. But hope this helps.