将多个值从单个输入框存储到本地存储并提交按钮并将它们返回给其他按钮答案

【问题标题】：Store multiple values to local storage from a single input box and submit button and return them to feed other buttons将多个值从单个输入框存储到本地存储并提交按钮并将它们返回给其他按钮
【发布时间】：2020-06-06 15:44:18
【问题描述】：

编码新手，参加训练营课程 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>

【问题讨论】：

标签： javascript html

【解决方案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];
}

【讨论】：

谢谢，我会试一试的。