Javascript 为什么是第二个<；输入>；未在本地存储中设置值？

我正在尝试获取用户输入。它正在工作，但仅适用于第一次输入。第二个输入未在本地存储器中设置。我有多个输入，当我输入第二个输入时，它不会被捕获。为什么?

Javascript

(function () {
  $(document).on("input", function () {
    data = $("input").val();
    localStorage.setItem("test", data);
  });
})();

HTML

 <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input type="submit" value="Submit">
 </form>

名字：



姓氏：

使用

val

作为变量时，它只获取调用它的jQuery集中第一个元素的值，而不是所有元素的值

如果你想要所有这些，你需要在集合中循环。例如，如果您希望字段具有名称/值对的对象，可以使用

get

获取jQuery对象元素的数组（可能只是

text

字段的元素），然后

map

将它们映射到包含与，然后使用

Object.fromEntries

创建对象。因为这是一个对象，而不是字符串，所以要将其存储在本地存储器中，需要将其转换为字符串。您可以使用JSON：

var entries = $("input:text").get().map(({name, value}) => [name, value]);
var data = Object.fromEntries(entries);
localStorage.setItem("test", JSON.stringify(data));

实例：

var entries=$（“输入：文本”）.get（）.map（{name，value}）=>[name，value]）；
var数据=Object.fromEntries（条目）；
log（“将存储：”，JSON.stringify（数据））

名字：



姓氏：




您正在侦听文档上的任何
输入事件，而我假设您实际上只想在输入字段发生更改时进行更新，因此首先要进行两次更改；确保您的目标是输入字段，并使用
change
事件而不是输入

$(document).on("input", function () {
// to
$(document).on('change', 'input', function () {

此外，您将覆盖名为
test
的条目，因为两个输入都发送到同一个条目-例如，您可以传递
name
属性

data = $("input").val();
localStorage.setItem("test", data);
// to
localStorage.setItem($(this).attr('name'), $(this).val());

下面是一个演示，在
上，您不是从事件的目标获取值，而是从文档中的第一个输入获取值，如您所见：


$（文档）.on（'input'，（e）=>{
//这将始终返回相同的输入（第一个）：
console.log（$（'input'）.attr（'name'））；
})
正文{
保证金：0；
}
输入{
显示：块；
填充：8px；
边框：2件纯黑；
字体系列：monospace；
框大小：边框框；
利润率：8px；
}

因为
$（'input'）
选择所有输入，在这种情况下，
.val（）
只获取第一个输入的值。谢谢您的回答。但它返回了一个错误：
迭代器值abc不是一个条目对象
这是为什么？@grevvx4-Huh，我对此感到惊讶。我已经更新了代码，因此它不使用jQuery的
映射。