How to store inputs multiple times into local storage

Question

I am currently inputting values into 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(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>

However I found that I was unable to Output more than 1 value from local storage which I am currently achieving doing this.

    <h2 class="title">Upcoming Events</h2>
<h3 id='input1'>&nbsp;</h3>
<h3 id='input2'>&nbsp;</h3>
<h3 id='input3'>&nbsp;</h3>
<h3 id='input4'>&nbsp;</h3>

    <!-- running script here will populate H2's with values from local storage -->
<script>
   document.getElementById('input1').innerText = localStorage.getItem('EventName');
   document.getElementById('input2').innerText = localStorage.getItem("EventDateAndTime");
   document.getElementById('input3').innerText = localStorage.getItem("EventLocation");
   document.getElementById('input4').innerText = localStorage.getItem("EventNotes");
   </script>

How would I be able to display the most recent input using those fields and then display ALL previous inputs on another page?

Answer 1

Your current code won't work, because you're retrieving items from EventName , EventDateAndTime , etc properties of local storage, but you never save to those properties, so they'll be null .

You're storing all the event info in a single property, localStorage.Events , which contains an array that you push to when you add a new event. So, to display the last item saved, you just need to access the top item in the array, and to display previous items saved, just access the appropriate previous index in the array:

const renderEvent = (event) => {
  document.getElementById('input1').textContent = event.name;
  document.getElementById('input2').textContent = event.dateTime;
  document.getElementById('input3').textContent = event.location;
  document.getElementById('input4').textContent = event.notes;
};

// Display last event:
const storedEvents = JSON.parse(localStorage.getItem("Events"));
if (!storedEvents) throw new Error('No events');
const lastEvent = storedEvents.pop();
renderEvent(lastEvent);

// Display nth event:
const index = 5; // for example: display 5th event saved
const storedEvents = JSON.parse(localStorage.getItem("Events"));
if (!storedEvents) throw new Error('No events');
const event = storedEvents[index];
renderEvent(event);