Question

我需要从HTML表单获取数据并将其存储在localStore中，但是在尝试这样做时遇到了一些问题。

让我们举一个简短的例子：

<form class="w3-container" id="form"> 
<p><label>Name</label><input class="w3input" type="text" id="name"></p>
<p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
<p><label>Number</label><input class="w3-input" type="text" id="number"></p>
<button class="w3-button w3-blue">Submit</button>
</form>

然后是JavaScript代码：

localStorage.setItem("name", document.getElementById("name").value);
localStorage.setItem("adress", document.getElementById("adress").value);
localStorage.setItem("number", document.getElementById("number").value);

我尝试了多种方法来执行此操作，但似乎没有任何效果。我想念什么？

Answer 1

如果在单击“提交”按钮时尝试将数据存储在localStorage中，则代码应如下所示。

function onSubmit() {
  localStorage.setItem("name", document.getElementById("name").value);
  localStorage.setItem("adress", document.getElementById("adress").value);
  localStorage.setItem("number", document.getElementById("number").value);
}

<form class="w3-container" id="form">
  <p><label>Name</label><input class="w3input" type="text" id="name"></p>
  <p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
  <p><label>Number</label><input class="w3-input" type="text" id="number"></p>
  <button class="w3-button w3-blue" onclick="onSubmit()">Submit</button>
</form>

Answer 2

或者，您可以添加Event Listener。
addEventListener vs onclick

Answer 3

在<script></script>标签或外部js文件中，

获取表单元素： const form = document.getElementById('form');

添加一个侦听器以侦听Submit事件并保存您的值：

form.addEventListener('submit', () => {
  localStorage.setItem("name", document.getElementById("name").value);
  localStorage.setItem("adress", document.getElementById("adress").value);
  localStorage.setItem("number", document.getElementById("number").value);
})

您应避免使用内联javascript（除非您使用的是框架，例如react（那么它甚至不是真正的内联））。

如何使用JavaScript将HTML表单字段值保存到localStorage？

3 个答案: