如何使用来自搜索输入的显示文本来显示来自使用 localStorage 的 Javascript 中先前搜索的数据答案

【问题标题】：How to use displayed text from a search input to display data from a previous search in Javascript using localStorage如何使用来自搜索输入的显示文本来显示来自使用 localStorage 的 Javascript 中先前搜索的数据
【发布时间】：2021-01-18 03:57:27
【问题描述】：

我正在创建一个天气应用程序，其中搜索历史由用户生成，可用于显示以前搜索的数据。

在 HTML 中显示的部分是：

<div id="search-history" class="list-group">
 <!-- DISPLAY SEARCHED ITEMS -->
</div>

而 JS 是：

//------------------ SEARCH CITY AND STORE SEARCH ----------------------
var searchCity = function (event) {
    event.preventDefault();
    var cityName = cityInputEl.value.trim();
    if (cityName) {
        getCityWeather(cityName);
        cityInputEl.value = "";
        var searchedCity = JSON.parse(localStorage.getItem("CityList")) || [cityName];
        var storedCities = {city: cityName};
        searchedCity.push(storedCities);

        localStorage.setItem("CityList", JSON.stringify(searchedCity));
    } else {
        alert("Enter a city name");
    }
    createCityList(searchedCity);
}

正在调用的 getCityWeather 函数只返回从 API 获取的天气。真正的问题是在这里我正在尝试创建可用于显示最后一个城市名称的按钮，当您单击它时，将再次显示先前搜索过的城市的天气信息。

//Create search history list
function createCityList() {
    var searchedCities = JSON.parse(localStorage.getItem("CityList")) || [];
    searchHistory.innerHTML="";
     for (i = 0; i<searchedCities.length; i++){
        var buttonEl = document.createElement("button");
        buttonEl.classList = "list-group-item list-group-item-action";
        buttonEl.id = "searchedCity" + i;
        buttonEl.textContent = searchedCities[i].city;
        searchHistory.appendChild(buttonEl);
    }
}


// Search old city
function searchPreviousCity(searchedCities) {
    var buttonElArr = [];
    for (i = 0; i<searchedCities.length; i++) {
        buttonElArr[i] = document.getElementById("searchedCity" + i);
        console.log("BUTTON ARR", buttonElArr)
    }
    
    buttonElArr.map((oldSearch) => {
        oldSearch.addEventListener("click", function() {
            getCityWeather(oldSearch.innerHTML);
        })
    });
}


//clear scearch history
clearSearchHistory.addEventListener("click", function(event){
    localStorage.clear(event);
    searchHistory.textContent = "";
});

createCityList();

cityFormEl.addEventListener("submit", searchCity);

基本上我一直在搞乱它，试图将搜索存储在一个数组中，然后让按钮列表显示相应城市的天气信息。

如果Button1：CityA，Button2：CityB，Button3：CityC..当我点击Button2时，应该会显示B市的天气。

【问题讨论】：

标签： javascript

【解决方案1】：

您应该尝试在数据库中创建一个新表并保存用户 ID、搜索、时间戳并在需要时获取数据

【讨论】：

我把问题搞砸了。我的意思是说它在本地存储中而不是服务器中。
您可以使用cookie，因为您必须存储以前的数据，然后才能达到您想要的结果