Javascript 在数组中循环以在localStorage中的对象中存储字符串值并检索它们

我正在开发一个网络应用程序，让用户可以策划一个双故事片放映。用户输入一个标题、一个简介和两个电影标题。在submit按钮上调用一个函数，该函数显示用户提交的标题、用户提交的blurb，并进行两个单独的API调用，以检索每个功能的电影信息

我正在尝试建立一种利用本地存储的收藏夹功能。概念化解决方案，更不用说实现它可能是我的第一个错误，因此我愿意接受其他建议，但我认为最好的方法是捕获每个搜索字段值（标题、模糊、movie_1、movie_2），将这四个字符串值存储在一个对象中，然后将该对象推送到一个数组中，将每个对象放入localStorage，然后单击按钮从localStorage获取每个对象

我能够捕获这些项目，将它们存储在localStorage中，并动态生成按钮，当单击时，这些按钮会将四个搜索字段值填充回相应的搜索字段中，允许用户再次单击submit按钮，该按钮运行api调用并显示所有内容（同样：标题、blurb、movie_1、movie_2）

我的问题是遍历对象并获取不同的搜索字段数据值。我想问题在于为我在数组中循环的不同对象分配一个名称或键，然后通过localStorage从相应的按钮访问正确的值。我似乎正在设置相同的localStorage对象（或重写它）并反复访问它，而不是设置一个新的localStorage对象并获取正确的对象

我将在下面提供一些代码片段，但仔细阅读我的GitHub repo可能更容易：

如果您查看repo，最新的代码可以在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);
})

//捕获搜索字段值并最终将其显示为按钮的逻辑
//空数组
var-dfArray=[]；
//对象来保存每个字符串值以填充搜索字段
var doubleFeature={
特辑(1):电影(1)，
特辑2：电影2，
标题:，
DFBlurb:blurb
}
推送（双功能）；
对于（var i=0；i

谢谢你的帮助。我正在学习web开发，可能会使事情过于复杂，或者错过了一种更容易思考和/或解决问题的方法

而不是此循环：

for（var i=0；i

我会将整个阵列放入本地存储

localStorage.setItem（“df”，JSON.stringify（dfArray））；

此外，您还必须在单击函数中决定从数组中获取哪个对象

$（document）.on（“单击”，“.df收藏夹按钮”，函数（））{
event.preventDefault（）；
var id=-1；//哪一个
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）；
})

代替此循环：

for（var i=0；i

我会将整个阵列放入本地存储

localStorage.setItem（“df”，JSON.stringify（dfArray））；

此外，您还必须在单击函数中决定从数组中获取哪个对象

$（document）.on（“单击”，“.df收藏夹按钮”，函数（））{
event.preventDefault（）；
var id=-1；//哪一个
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）；
})