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

【问题标题】：Looping through array to store string values in objects in localStorage and retrieving them遍历数组以将字符串值存储在 localStorage 的对象中并检索它们
【发布时间】：2020-08-08 14:42:43
【问题描述】：

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

我正在尝试建立一些利用 localStorage 的收藏夹功能。将解决方案概念化，更不用说实施它可能是我的第一个错误，所以我愿意接受其他建议，但我相信最好的方法是捕获每个搜索字段值（标题、简介、电影_1、电影_2），存储这四个字符串值在一个对象中，然后将该对象推送到一个数组，将每个对象放入 localStorage，然后通过单击按钮从 localStorage 获取每个对象。

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

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

我将在下面提供一些代码 sn-ps，但仔细阅读我的 GitHub 存储库可能更容易：https://github.com/mchellagnarls/double_feature

如果您查看 repo，可以在 index_test.html 和 app_test.js 中找到最新的代码，而在 index.html 和 app.js 中可以找到没有任何损坏的收藏功能的先前版本。

一些代码sn-ps：

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

感谢您的帮助。我正在学习 Web 开发，我可能会使事情过于复杂，或者错过了一种更简单的方法来思考和/或解决它。

【问题讨论】：

标签： javascript jquery arrays object local-storage

【解决方案1】：

而不是这个循环：

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

【讨论】：