Цикл по массиву для хранения строковых значений в объектах в localStorage и извлечения их

Question

Я создаю веб-приложение, которое позволяет пользователю показывать двойной фильм. Пользователь вводит заголовок, объявление и два заголовка фильма. На кнопке отправки вызывается функция, которая отображает отправленный пользователем заголовок, отправленный пользователем рекламный ролик и выполняет два отдельных вызова API для получения информации о mov ie для каждой соответствующей функции.

Я пытаюсь установить sh что-то из избранного, использующего localStorage. Концептуализация решения, не говоря уже о его реализации, может быть моей первой ошибкой, поэтому я открыт для альтернативных предложений, но я считаю, что лучший способ сделать это - захватить каждое значение поля поиска (title, blurb, movie_1, movie_2), store эти четыре строковых значения в объекте, а затем pu sh этот объект в массив, помещая каждый объект в localStorage и затем получая каждый объект из localStorage с помощью нажатия кнопки.

Я могу захватить эти элементы, хранят их в localStorage и динамически генерируют кнопки, которые при нажатии заполняют четыре значения поля поиска обратно в соответствующие поля поиска, позволяя пользователю снова нажать кнопку отправки, которая выполняет вызовы API и отображает весь контент (снова: название, реклама, фильм_1, фильм_2).

Моя проблема заключается в циклическом перемещении по объектам и получении различных значений данных поля поиска. Я предполагаю, что проблема заключается в назначении имени или ключа для различных объектов, которые я перебираю в массиве, а затем доступ к правильным значениям с соответствующей кнопки через localStorage. Кажется, я устанавливаю один и тот же объект localStorage (или переписываю его) и снова и снова получаю к нему доступ, в отличие от установки нового объекта localStorage и получения правильного getItem.

Ниже я приведу несколько фрагментов кода, но, возможно, будет проще просмотреть мое репозиторий GitHub: https://github.com/mchellagnarls/double_feature

Если вы посмотрите на репозиторий, последний код находится в index_test. html и app_test. js, тогда как в index. html и app. js.

содержатся некоторые предыдущие версии без каких-либо сломанных любимых функций. Некоторые фрагменты кода :

// logic to capture search field values and to eventually display them as buttons
  // empty array
  var dfArray = [];

  // object to hold each of the string values to populate the search fields
  var doubleFeature = {
    feature_1: movie_1,
    feature_2: movie_2,
    DFTitle: title,
    DFBlurb: blurb
  }

  dfArray.push(doubleFeature);

  for (var i = 0; i < dfArray.length; i++) {

    localStorage.setItem("df", JSON.stringify(dfArray[i]));

    var button = $("<button>");
    button.addClass("df-favorite-button");
    button.text(title);

    $("#buttons-view").append(button);
  }

$(document).on("click", ".df-favorite-button", function() {
  event.preventDefault();

  var savedDF = JSON.parse(localStorage.getItem("df"));

  $("#movie-input-1").val(savedDF.feature_1);
  $("#movie-input-2").val(savedDF.feature_2);
  $("#df-title-input").val(savedDF.DFTitle);
  $("#df-blurb-input").val(savedDF.DFBlurb);
})

Спасибо за любую помощь. Я изучаю веб-разработку и, возможно, слишком усложняю вещи или упускаю простой способ думать об этом и / или решать его.

Answer 1

Вместо этого l oop:

  for (var i = 0; i < dfArray.length; i++) {

    localStorage.setItem("df", JSON.stringify(dfArray[i]));

    var button = $("<button>");
    button.addClass("df-favorite-button");
    button.text(title);

    $("#buttons-view").append(button);
  }

Я бы поместил весь массив в локальное хранилище

localStorage.setItem("df", JSON.stringify(dfArray));

Также тогда вы должны решить, какой объект получить из массива в функции клика

$(document).on("click", ".df-favorite-button", function() {
  event.preventDefault();

  var id = -1; // which one

  var savedDF = (JSON.parse(localStorage.getItem("df")) || []).find(pr => pr.id === id);

  $("#movie-input-1").val(savedDF.feature_1);
  $("#movie-input-2").val(savedDF.feature_2);
  $("#df-title-input").val(savedDF.DFTitle);
  $("#df-blurb-input").val(savedDF.DFBlurb);
})