Как получить значения из локального хранилища

Question

В моем приложении для напоминаний я собираю информацию из входов в localalstorage и хочу отобразить эти входные данные на другой странице приложения. Я ввел эти значения в свое локальное хранилище следующим образом:

<h2 style="text-align:center;margin-top: 5px">Create an Event</h2>
<FORM NAME="myform" ACTION="" METHOD="GET"><P></P>
Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><P></P>
Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><P></P>
Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><P></P>
Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><P></P>
<button onclick="myFunction()" 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");
</script>

И я попытался отобразить эти входные данные следующим образом

   <h2 class="title">Upcoming Events</h2>

    <h2 id='input1'>&nbsp;</h2>
    <h2 id='input2'>&nbsp;</h2>
    <h2 id='input3'>&nbsp;</h2>
    <h2 id='input4'>&nbsp;</h2>
    <script>
 function myFunction() {
      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);
   }

Answer 1

Реорганизация на основе моих комментариев выше. Если два фрагмента представляют две страницы, вы сможете достичь этого с помощью следующего:

<h2>Create an Event</h2>

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

<!-- running script here will populate inputs with values from local storage -->
<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");
</script>

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);
}

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

<!-- running script here will populate H2's with values from local storage -->
<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");
</script>