Javascript localStorage 未接收来自表单的输入

Question

我正在努力将数据从 HTML 表单保存到 localStorage。

这是我到目前为止的代码

HTML

<form onSubmit="newRecipe()">
  Recipe Name:<br>
  <input type="text" value="Recipe" name="Recipe"><br>
  Ingredients:<br>
  <input type="text" name="Ingredients" value="Ingredients"><br><br>
  <input type="submit" value="Submit">
</form> 

JavaScript

function newRecipe(){
     var inputrecipe= document.getElementById("Recipe");
     localStorage.setItem("Recipe", JSON.stringify(Recipe));

  var inputingredients= document.getElementById("Ingredients");
  localStorage.setItem("Ingredients", inputingredients.value, JSON.stringify(testObject));
    }
document.getElementById("test").innerHTML = localStorage.getItem("Recipe"); 

我做错了什么？当我提交表单时，我看到白屏并且没有本地存储保存

Answer 1

您的代码中有一些错误。对于其中一个，您实际上并没有为您尝试获取的元素分配一个id。我稍微改变了你的代码并使用了 jQuery(只是因为它打字速度更快并且需要编写的代码更少)。我还建议遵循正常的命名约定，例如为变量提供小写名称(除非它们是构造函数)和驼峰式命名。在 HTML 中，您可能希望尝试将所有内容保持小写并使用 - 代替。

这尚未从 localStorage 读取，并且不显示字段中的值。但它确实拯救了它。我希望你能从这里用面包屑找出剩下的部分。 :)

HTML:

<form id='form'>
  Recipe Name:<br>
  <input type="text" value="Recipe" name="recipe" id="recipe">
  <br>
  Ingredients:<br>
  <input type="text" name="ingredients" value="ingredients" id="ingredients">
  <br><br>
</form> 
<button>Submit</button>

JS:

$('button').click(function(){
    var name = $('#recipe').val();
  var ingredients = $('#ingredients').val();
  localStorage.setItem(name, ingredients);  
});