Javascript 如何从同一输入框中获取多个输入并存储它们？

我目前正在获取关于一个新事件的输入，并像这样将它们存储在本地存储器中

<form name="myform" action="" method="GET">
   Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
   Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
   Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
   Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
   <button onclick="storeValues()" type=submit>Submit</button>
</form>

    <script>
   document.getElementById('input1').value = localStorage.getItem("EventName");
   document.getElementById('input2').value = localStorage.getItem("EventDateAndTime");
   document.getElementById('input3').value = localStorage.getItem("EventLocation");
   document.getElementById('input4').value = localStorage.getItem("EventNotes");


function storeValues() {
    localStorage.setItem("EventName", document.getElementById('input1').value);
    localStorage.setItem("EventDateAndTime", document.getElementById('input2').value);
    localStorage.setItem("EventLocation", document.getElementById('input3').value);
    localStorage.setItem("EventNotes", document.getElementById('input4').value);
}
</script>

事件名称：

活动日期和时间：

活动地点：

活动说明：

提交
document.getElementById（'input1'）。value=localStorage.getItem（“EventName”）；
document.getElementById（'input2'）。value=localStorage.getItem（“EventDateAndTime”）；
document.getElementById（'input3'）。value=localStorage.getItem（“EventLocation”）；
document.getElementById（'input4'）。value=localStorage.getItem（“EventNotes”）；
函数storeValues（）{
localStorage.setItem（“EventName”，document.getElementById（“input1”）.value）；
localStorage.setItem（“EventDateAndTime”，document.getElementById（'input2'））.value）；
localStorage.setItem（“EventLocation”，document.getElementById（“input3”）.value）；
localStorage.setItem（“EventNotes”，document.getElementById（“input4”）.value）；
}

---

但我很确定，每当我接受第二次输入时，它都会在本地存储中覆盖它。我如何更改它，以便可以多次接收这些输入？

如果您希望同时存储它们，则必须以不同的方式命名它们

---

您可能想要的是类似于本地存储中的值数组的东西，如果我没记错的话，它不是开箱即用的吗？我真的不记得了，但您可能可以将此数组数据序列化/取消序列化为JSON字符串。

您需要在存储器中存储一个数组（当然，您必须将数组字符串化以存储为字符串，然后解析它以对其进行操作。）

我写了一个片段，它会给你一个想法

事件名称：

活动日期和时间：

活动地点：

活动说明：

提交


函数loadEvents（）{
设ul=document.getElementById（“事件列表”）；
ul.innerHTML=“”；
让events=localStorage.getItem（“事件”）；
如果（事件）{
试一试{
events=JSON.parse（事件）；
events.map（e=>{
ul.innerHTML+=`
日期为${e.date}的名为${e.name}的活动将在${e.location}举行。（${e.notes}）
`
})
}捕捉（错误）{
控制台日志（err）；
}
}
}
loadEvents（）；
函数storeValues（）{
//获取以前的值
让events=localStorage.getItem（“事件”）；
让newEvent={
名称：document.getElementById（'input1'）。值，
日期：document.getElementById（'input2'）。值，
位置：document.getElementById（'input3'）。值，
注意：document.getElementById（'input4'）.value
}
试一试{
如果（事件）{
events=JSON.parse（事件）；
events.push（newEvent）；
}否则{
抛出错误（“此处无事件键”）；//只是将我们带到catch块
}
}捕捉（错误）{
events=[newEvent]；
}最后{
//储存
setItem（“事件”，JSON.stringify（事件））；
loadEvents（）；
}
}

我认为您正在尝试重用此表单来创建多个事件，并将这些数据存储到本地存储中。如果是这样，那么你可以检查我的解决方案

JS-Bin
事件名称：

活动日期和时间：

活动地点：

活动说明：

提交
函数存储值（e）{
e、 预防默认值（）；
让storedEvents=JSON.parse（localStorage.getItem（“事件”））| |[]；
const newEventDetails={
名称：document.getElementById（'input1'）。值，
dateTime:document.getElementById（'input2'）。值，
位置：document.getElementById（'input3'）。值，
注意：document.getElementById（'input4'）.value
}
storedEvents.push（newEventDetails）；
setItem（“事件”，JSON.stringify（storedEvents））；
console.log（'storedEvents'，storedEvents）；
}

多次接受输入？请你把那句话说清楚一点好吗。同上@SifatHaque的澄清请求2。这些值是否曾经离开过本地存储？想知道为什么您需要将来自一个用户的多个表单输入存储在本地存储中，而不将其保存在其他位置（存储在您的服务器上，并根据cookie id或类似内容填充）-您可能需要对本地存储/如果存在，并创建自动递增值以附加到每个记录的每个名称，如果我理解正确。无法编辑，但忽略我上面所说的关于自动递增的内容，因为其他人已经表明，从长远来看，一系列值将更好/更干净。