Динамическое создание кнопок из массива localStorage

Question

Я застрял на этом некоторое время и хотел получить некоторую информацию о том, что я могу сделать по-другому. По сути, я беру пользовательский ввод и помещаю его в массив, создаю кнопку на основе этого ввода и сохраняю этот массив в localStorage. Когда браузер обновляется, я хочу взять эту строку и заново создать те же кнопки. Вот то, что я получил до сих пор:

    function generateButton() {
      var create = $("<button>")
      create.attr("class", "btn btn-outline-secondary")
      create.attr("type", "button")
      create.text(response.name)
      buttonDiv.prepend(create)

      var cityString = response.name
      cityButtonArr.push(cityString)

      localStorage.setItem("cityStorage", JSON.stringify(cityButtonArr))
      console.log(cityButtonArr)

, а также:

function loadData(){

  var loadData = localStorage.getItem("cityStorage")
  var loadedArr = JSON.parse(loadData)
  //  

  if(loadedArr != null && loadedArr != ""){
  cityButtonArr.push(loadedArr)
  for(i=0; i<cityButtonArr.length;i++){
    var create = $("<button>")
    create.attr("class", "btn btn-outline-secondary")
    create.attr("type", "button")
    create.text(cityButtonArr[i])
    buttonDiv.prepend(create)
  }
}

Это работает почти идеально, но вместо загрузки отдельных частей массива («Атланта») , "Лас-Вегас", "Солт-Лейк-Сити") он создает только одну кнопку с текстом (atlantalasvegassaltlakecity). Как я могу разбить массив при использовании JSON .parse? Или я все об этом говорю не так?

Answer 1

function loadData() {

    var loadData = localStorage.getItem("cityStorage")
    if (loadData == null || loadData == "") return;

    var cityButtonArr = JSON.parse(loadData)

    for (i = 0; i < cityButtonArr.length; i++) {
        var create = $("<button>")
        create.attr("class", "btn btn-outline-secondary")
        create.attr("type", "button")
        create.text(cityButtonArr[i])
        buttonDiv.prepend(create)
    }

}

Полный код