將多個值從單個輸入框存儲到本地存儲並提交按鈕並將它們返回給其他按鈕

Question

編碼新手，7 周進入訓練營 class。 我正在嘗試從輸入搜索 window 中保存多個城市名稱，並帶有一個提交按鈕到本地存儲，並將這些名稱返回以填充 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中存儲和檢索多個值，則需要保存一個數組或object。

而且由於 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];
}