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

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

或者，您可以添加一个事件监听器 。
addEventListener与onclick

Answer 3

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

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

2. 添加一个侦听器以监听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（那么它甚至不是真正的内联））。