遍历数组以将字符串值存储在 localStorage 中的对象中并检索它们

Question

I'm building a web app that lets the user curate a double-feature film showing. The user enters a title, a blurb, and two film titles. On a submit button a function is called that displays the user-submitted title, user-submitted blurb, and makes two separate API calls to retrieve movie information on each respective feature.

I'm trying to establish something of a favorites functionality that utilizes localStorage. Conceptualizing the solution, let alone implementing it may be my first mistake, so I'm open to alternative suggestions, but I believe the best way to do this is to capture each search field value (title, blurb, movie_1, movie_2), store these four string values in an object and then push that object to an array, placing each object into localStorage and then getting each object from localStorage later on with a button click.

I'm able to capture these items, store them in localStorage and dynamically generate buttons that when clicked populates the four search field values back into the respective search fields, allowing the user to click the submit button again which runs the api calls and displays all of the content (again: title, blurb, movie_1, movie_2).

My problem is looping through the objects and grabbing the different search field data values. I suppose the problem is in assigning a name or key to the different objects that I'm looping through in the array and then accessing the correct values from the appropriate button through localStorage. I seem to be setting the same localStorage object (or rewriting it) and accessing it over and over, as opposed to setting a new localStorage object and getItem'ing the right one.

I'll provide some code snippets below, but it might be easier to peruse my GitHub repo: https://github.com/mchellagnarls/double_feature

If you look at the repo, latest code is found in index_test.html and app_test.js, whereas a previous version without any of the broken favorite functionality is found in index.html and app.js.

Some code snippets:

// 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);
})

Thanks for any help. I'm learning web development and I may be overcomplicating things or missing out on an easier way to think about it and/or solve it.

Answer 1

Instead of this loop:

  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);
  }

I would place the whole array into local storage

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

Also then you have to decide which object to get from array in click function

$(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);
})