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

Question

I am currently taking inputs about a new event and storing them in local storage like this.

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

But I am pretty sure whenever I take a second input it overwrites it in local storage. How would I change it so i can take these inputs multiple times?

Answer 1

If you want them to both be stored, then you have to name them differently.

What you probably want is something like an array of values in local storage, which if I remember correctly doesn't work out of the box? I don't really remember, but you could probably serialize/unserialize this array data as a JSON string.

Answer 2

you will need to store an array in storage (of course you will have to stringify the array to store as string and later parse it to operate onto it.)

I have written a snippet it will give you an idea.

<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

I think you are trying to reuse this form to create multiple events and store those data to your localStorage. If that's the case then you can check my solution.

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