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

我做错了什么？当我提交表格时，我得到一个白色屏幕，没有localStorage保存

Answer 1

您的代码中存在一些错误。例如，您实际上没有为您尝试获取的元素分配id。我稍微改变了你的代码并使用了jQuery（只是因为它输入速度更快，编写的代码更少）。我还建议遵循正常的命名约定，例如给出变量小写名称（除非它们是构造函数）和camelCasing。在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);  
});

Answer 2

您的代码中存在一些错误。您没有ID Recipe和Ingredients

的元素

像这样修改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>
  <input type="submit" value="Submit">
</form>

JS

1）提交表单时，需要触发一个函数。

var form=document.getElementById("form");
form.onsubmit=function(){
   //code here
}

2）获取输入的值使用.value属性，如下所示：

var inputrecipe= document.getElementById("Recipe").value;

3）在函数内包含行document.getElementById("test").innerHTML = localStorage.getItem("Recipe");。

var form=document.getElementById("form");
form.onsubmit=function(){
   alert("it is hitting");
   var inputrecipe= document.getElementById("Recipe").value;
   localStorage.setItem("Recipe", JSON.stringify(inputrecipe));

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

这是一个有效的solution

Javascript localStorage没有从表单中恢复输入

2 个答案: