javascript - 如何获取表单提交按钮以保存到 localStorage

Question

我是初学者，正在尝试弄清楚如何让它发挥作用。我有一个表单，我希望提交按钮能够保存到 localStorage。到目前为止，这就是我所拥有的。

<script>
function storeRecipe() {
    localStorage.setItem($("#recipe-name").val(), $("#recipe-
      description").val());
  console.log(Object.keys(localStorage));
}
</script>

<b>Recipe Name:</b>
<br>
<textarea id="recipe-name" rows="1" cols="35"></textarea>
<br><br>
<b>Recipe Description:</b>
<br>
<textarea id="recipe-description" rows="15" cols="35"></textarea>
<br><br>
<input type="submit" value="Send Recipe" onClick="storeRecipe()">

Answer 1

提交后，您可以停止提交表单并将每个输入字段保存为本地存储键。工作 jsfiddle:https://jsfiddle.net/mr4ms4zp/ .在 Mac 上打开控制台 cmd+opt+i 可以看到更改后的 localStorage 对象。

<form method="POST">
  <b>Recipe Name:</b>
  <br>
  <textarea id="recipe-name" rows="1" cols="35"></textarea>
  <br><br>
  <b>Recipe Description:</b>
  <br>
  <textarea id="recipe-description" rows="15" cols="35"></textarea>
  <br><br>
  <input type="submit" value="Send Recipe">
</form>

<script>
  document.querySelector('form').onsubmit = function(e) {
    e.preventDefault();
    var name = document.querySelector('#recipe-name').value;
    var description = document.querySelector('#recipe-description').value;
    localStorage["name"] = name;
    localStorage["description"] = description;
    console.log(localStorage);
  }
</script>