从一个输入框将多个值存储到本地存储中，然后提交按钮并返回它们以供其他按钮使用

Question

编码新手，需要7周的训练营课程。我试图使用输入按钮将输入的搜索窗口中的多个城市名称保存到本地存储中，然后将这些名称返回以填充8个按钮框，然后单击这些按钮框以这些保存的名称执行另一次搜索。现在，我只能保存一个值，并且它向所有8个按钮返回相同的值。在我的JS和HTML代码下面。

var wantCity = document.getElementById('submitBtn');
wantCity.addEventListener('click', mySave,);

function mySave () {
  var myContent = document.getElementById('inputCity').value;
  localStorage.setItem('myContent', myContent);

  event.preventDefault(mySave);
}

var myContent = localStorage.getItem('myContent');
document.getElementById('city1').value = myContent;

var myContent2 = localStorage.getItem('myContent');
document.getElementById('city2').value = myContent2;

var myContent = localStorage.getItem('myContent');
document.getElementById('city3').value = myContent;

var myContent = localStorage.getItem('myContent');
document.getElementById('city4').value = myContent;

var myContent = localStorage.getItem('myContent');
document.getElementById('city5').value = myContent;

var myContent = localStorage.getItem('myContent');
document.getElementById('city6').value = myContent;

var myContent = localStorage.getItem('myContent');
document.getElementById('city7').value = myContent;

var myContent = localStorage.getItem('myContent');
document.getElementById('city8').value = myContent;

这里是HTML部分：

<div class="container" id="weatherInfo">
  <div class="row">
    <div class="col-sm-3" class="cityRequest" id="infoBox">
      <div class="input-group mb-3">
        <label id="inputValue">Enter City Name:</label>
        <input type="text" class="form-control" value="" id="inputCity"
               class="nameOfCity">
        <div class="input-group-append">
          <button class="btn btn-primary mb-2" type="button" id="submitBtn">
            Submit
          </button>
        </div>
      </div>
      <div class="list-group" class="previousCities">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city1">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city2">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city3">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city4">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city5">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city6">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city7">
        <input class="favorite styled" type="button" value="" class="cities"
               id="city8">
      </div>
    </div>
  </div>
</div>

Answer 1

如果需要在localStorage中存储和检索多个值，则需要保存一个数组或对象。

并且因为localStorage仅存储字符串，所以您需要在存储之前将该数组/对象转换为字符串。

let cities = [];
let iCity = 0;

...
// store one city to cities array
cities[iCity++] = document.getElementById('inputCity').value;
localStorage('myContent', JSON.stringify(cities));

...
// update the city inputs
cities = JSON.parse(localStorage.getItem('myContent'));
for (let i = 0; i < cities.length; i++) {
  document.getElementById(`city${i+1}`).value = cities[i];
}