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>
但我很确定,每当我进行第二次输入时,它都会在本地存储中覆盖它。我将如何更改它以便我可以多次获取这些输入?
解决方案
如果您希望它们都被存储,那么您必须以不同的方式命名它们。
您可能想要的是本地存储中的值数组,如果我没记错的话,它不能开箱即用?我真的不记得了,但您可能可以将此数组数据序列化/反序列化为 JSON 字符串。
推荐阅读
- swiftui - 如何使一个视图中的两个列表在 SwiftUI 中滚动为一页?
- java - 一定范围内的随机日期时间
- r - 映射列表并选择列(以创建新列表)
- c# - 如何从 dotnet 核心 Web API 文件夹结构之外使用 ILogger?
- android - Android:提高地理围栏的准确性
- azure - 设置-AzVMCustomScriptExtension 是否成功?
- google-bigquery - 是否可以在 python 客户端中调用 BigQuery 程序?
- python-3.x - 为什么选择不同的数据类型会产生不同的结果?
- azure-devops - 如何开始修改所有 Azure 数据工厂触发器
- python - 合并具有相同范围但不同空间分辨率的 xarray 数据集