如何根据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

重构您的代码，以使获取和呈现数据的函数可在两种情况下重用：当用户更改input.页面加载时。更换以下部分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();}