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

我是一个初学者，正在试图找出如何让这个工作。我有一个表单，我希望submit按钮能够保存到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()">

函数storeRecipe（）{
localStorage.setItem（$（“#配方名称”）.val（），$（“#配方-
description”）.val（）；
log（Object.keys（localStorage））；
}
配方名称：





配方说明：

使用普通Javascript的解决方案

function storeRecipe() {
    let name = document.getElementById("recipe-name").value;
    let description = document.getElementById("recipe-description").value
    localStorage.setItem(name, description);
}

使用event.preventDefault（）避免提交默认行为或更改按钮的类型，我建议使用第二种：

<button type="button" value="Send Recipe" onClick"storeRecipe()">Submit</button>

提交

提交后，您可以停止表单提交，并将每个输入字段保存为本地存储密钥。正在工作的JSIDLE:。在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>

配方名称：





配方说明：





document.querySelector（'form'）。onsubmit=function（e）{
e、 预防默认值（）；
var name=document.querySelector（“#配方名称”）.value；
变量描述=document.querySelector（“#配方描述”）.value；
localStorage[“name”]=名称；
本地存储[“描述”]=描述；
log（本地存储）；
}

首先，您的JavaScript需要位于

-块中。很抱歉，它位于标记中。我只是没有把它们放在这里，因为我直接从JSFIDLE复制了代码。当我点击submit按钮时，什么也没有发生。提交后，您可以停止表单的提交，并将每个输入字段保存到localStorage键中。我将很快更新并提供答案。工作方式与我预期的完全一致：。（我将

localStorage

更改为

sessionStorage

以避免本地存储空间膨胀。我将

Object.keys（localStorage）

更改为

sessionStorage.getItem（$（“#配方名称”）.val（））

至于直接查看值，也许这样首先会解决您的问题？您知道如何使用DevTools来查看console.log（）的结果，对吗？（F12打开DevTools）当我点击提交按钮时，我什么也没发生。另外，我在控制台上看到一个错误？你得到的错误是什么？它在我的本地环境中工作得非常好。我在大约3分钟前做了一些更改，所以可能你使用的是旧代码？当我单击你提供的代码下方的“运行代码片段”时，我得到了以下信息：{“消息”：“Uncaught SecurityError:未能从“窗口”读取“localStorage”属性：文档是沙盒，没有“允许相同来源”标志。“文件名”：“lineno”：28，“colno”：5}当我在JSFIDLE上运行它时，我得到了以下信息：{“错误”：“请使用POST请求”}这是LocalStorage的一项安全功能。因此，它会在StackOverflow或任何其他站点上出现错误，您尝试从其他来源更新LocalStorage。请参阅[same origin policy]（）。它在您的环境中应该可以正常工作。请在您的环境中尝试。然后

console.log（LocalStorage）

，您将看到您的变量。