如何從同一個輸入框中獲取多個輸入並存儲它們？

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