如何根据localStorage input.value 渲染列表？

Question

我编写了一个在输入时触发并从 API 获取数据的函数。我需要将最后一个 input.value 存储在 localStorage 中，然后在重新加载时在 localStorage 中将 input.value 设置为 1。一切都很好，除了当我重新加载页面时，我有我需要的价值，但我必须单击空格然后退格 fe 来呈现内容。我想问一下我应该从哪里传递来自 localStorage 的 getter 以便它会在重新加载时触发该函数，但不会破坏输入的侦听器。下面有完整的代码：let country;let cities = [];const citiesDiv = document.getElementById("cities");const countryPicker = document.getElementById("country-picker");const getData = async () => {  const response = await fetch(    `https://api.openaq.org/v1/cities?country=${country}&limit=10&parameter=no2&order_by=parameter`  );  const data = await response.json();  cities = data.results;  console.log(cities);  citiesDiv.innerHTML = "";  renderCities(cities);};countryPicker.value = JSON.parse(localStorage.getItem("inputValue"));countryPicker.addEventListener("input", function(e) {  if (e.target.value.toLowerCase() === "poland".toLowerCase()) {    country = "PL";  } else if (e.target.value.toLowerCase() === "spain".toLowerCase()) {    country = "ES";  } else if (e.target.value.toLowerCase() === "germany".toLowerCase()) {    country = "DE";  } else if (e.target.value.toLowerCase() === "france".toLowerCase()) {    country = "FR";  }  localStorage.setItem("inputValue", JSON.stringify(e.target.value));  getData();});function renderCities(cities) {  cities.forEach(function(city) {    const p = document.createElement("p");    const button = document.createElement("button");    button.classList.add("accordion");    const div = document.createElement("div");    div.classList.add("panel");    const citiesDiv = document.getElementById("cities");    button.textContent = city.city;    citiesDiv.appendChild(button);    citiesDiv.appendChild(div);    div.appendChild(p);    p.textContent = "Lorem ipsum";  });  const acc = document.getElementsByClassName("accordion");  let i;

Answer 1

重构您的代码，以使获取和呈现数据的函数可在两种情况下重用：

1. 当用户更改input.

2. 页面加载时。

更换以下部分

countryPicker.value = JSON.parse(localStorage.getItem("inputValue"));

countryPicker.addEventListener("input", function(e) {

  if (e.target.value.toLowerCase() === "poland".toLowerCase()) {

    country = "PL";

  } else if (e.target.value.toLowerCase() === "spain".toLowerCase()) {

    country = "ES";

  } else if (e.target.value.toLowerCase() === "germany".toLowerCase()) {

    country = "DE";

  } else if (e.target.value.toLowerCase() === "france".toLowerCase()) {

    country = "FR";

  }

  localStorage.setItem("inputValue", JSON.stringify(e.target.value));

  getData();

});

与

countryPicker.value = JSON.parse(localStorage.getItem("inputValue"));

fetchAndRender(countryPicker.value);

countryPicker.addEventListener("input", e => fetchAndRender(e.target.value));

function fetchAndRender(value) {

  if (value.toLowerCase() === "poland".toLowerCase()) {

    country = "PL";

  } else if (value.toLowerCase() === "spain".toLowerCase()) {

    country = "ES";

  } else if (value.toLowerCase() === "germany".toLowerCase()) {

    country = "DE";

  } else if (value.toLowerCase() === "france".toLowerCase()) {

    country = "FR";

  }

  localStorage.setItem("inputValue", JSON.stringify(value));

  getData();

}