Question

我是HTML，JavaScript和Stack Overflow的新手。我目前正在建立一个用于创建和保存食谱的网站。

我有一个用于配料的输入（ID为“ ingredient.value”），还有一个“添加配料”按钮，用于将输入中的配料添加到配方中。

例如，您可以在成分输入中输入“面食”，然后按“添加成分”，这会将面食添加到无序列表中。然后，如果您放入其他成分（例如“番茄酱”）并再次按下“添加成分”，则会将番茄酱放入“意大利面”下方的相同无序列表中。

然后我有一个“保存配方”按钮，我想使用该按钮将配方保存到本地存储中。

所以，我的问题是：

我将如何使“添加成分”按钮将输入变成对象数组，例如：

let fullRecipes = [{ ingredients: ["Pasta", "Tomato Sauce"] }];

，然后锁定“保存配方”按钮，将对象保存到本地存储中，然后移动到新对象上。这样，一旦保存了配方，下一个配方将是一个新对象，如下所示：

let fullRecipes = [
  { ingredients: ["Pasta", "Tomato Sauce"] },
  { ingredients: ["newIngredient1", "newIngredient2"] }
];

任何有关如何实现此目标的指针将不胜感激。谢谢。

Answer 1

I made a demo here

HTML：

<input id="ingredient.value">
<button id="addIngredient">Add ingredient</button>
<button id="save">Save</button>
<p id="ingredients"></p>
<p id="saved"></p>

JS：

var ingredients=[];
var recipe={};

document.getElementById("saved").innerText="Last saved: "+localStorage.getItem("ingredients");

document.getElementById("addIngredient").onclick=()=> {
    ingredients.push(document.getElementById("ingredient.value").value);
  document.getElementById("ingredients").innerText="Ingredients: "+ingredients;
}

document.getElementById("save").onclick=()=> {
    recipe["ingredients"]=ingredients;
    localStorage.setItem("ingredients", JSON.stringify(recipe));
  document.getElementById("saved").innerText="Saved: "+localStorage.getItem("ingredients");
}

用户每次添加成分时，都会将该输入值添加到数组中。当用户按下保存按钮时，我们将数组作为字符串保存到localStorage中。（我将其保存为字符串，因为localStorage只能保存字符串。）要将保存在localStorage中的成分再次转换为数组，只需执行此JSON.parse（THE_THING_YOU_WANT_TO_TURN_BACK_INTO_AN_ARRAY）

如何将输入中的值转换为保存到本地存储的对象数组？

1 个答案: