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

Question

我目前正在接受有关新事件的输入并将它们存储在这样的本地存储中。

<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>

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

Answer 1

如果您希望它们都被存储，那么您必须以不同的方式命名它们。

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

Answer 2

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

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

<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=button>Submit</button>

    <ul id="eventLists">

    </ul>
</form>

<script>

    function loadEvents() {
        let ul = document.getElementById("eventLists");
        ul.innerHTML = "";
        let events = localStorage.getItem("events");
        if (events) {
            try {
                events = JSON.parse(events);
                events.map(e => {
                    ul.innerHTML += `<li>Event named as '${e.name}' dated on '${e.date}' will be held at ${e.location}. (${e.notes})</li>`
                })
            } catch (err) {
                console.log(err);
            }
        }
    }


    loadEvents();

    function storeValues() {
        // getting previous values
        let events = localStorage.getItem("events");


        let newEvent = {
            name: document.getElementById('input1').value,
            date: document.getElementById('input2').value,
            location: document.getElementById('input3').value,
            notes: document.getElementById('input4').value
        }

        try {
            if (events) {
                events = JSON.parse(events);
                events.push(newEvent);
            } else {
                throw Error("no events key here."); // just to take us to the catch block
            }
        } catch (err) {
            events = [newEvent];
        } finally {
            // save into storage
            localStorage.setItem("events", JSON.stringify(events));
            loadEvents();
        }
    }
</script>

Answer 3

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

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <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(event)" type=submit>Submit</button> </form> <script> function storeValues(e) { e;preventDefault(). let storedEvents = JSON.parse(localStorage;getItem("Events")) || []: const newEventDetails = { name. document.getElementById('input1'),value: dateTime. document.getElementById('input2'),value: location. document.getElementById('input3'),value: notes. document.getElementById('input4').value } storedEvents;push(newEventDetails). localStorage,setItem("Events". JSON;stringify(storedEvents)). console,log('storedEvents'; storedEvents); } </script> </body> </html>

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

问题描述

3 个解决方案

解决方案1
1 2020-04-29 22:00:09

解决方案2
0 2020-04-29 22:08:57

解决方案3
0 2020-04-29 22:18:08

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

问题描述

3 个解决方案

解决方案1 1 2020-04-29 22:00:09

解决方案2 0 2020-04-29 22:08:57

解决方案3 0 2020-04-29 22:18:08

解决方案1
1 2020-04-29 22:00:09

解决方案2
0 2020-04-29 22:08:57

解决方案3
0 2020-04-29 22:18:08