How to retrieve values from local storage

Question

In my reminder app I collect information from inputs in localstorage and I would like to display these inputs on another page of an app. I input these values into my localstorage like this:

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

And I have attempted to display these inputs like this

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

Well does the storage item exist when you're calling `.getItem()`? — Dev Man, Apr 23 '20 at 03:11
From your example, it looks like you only need to add the same script in your top example to the bottom code snippet to get items out of local storage - also maybe move the button handler (myFunction) to the top script. Your H2's are never being assigned values from local storage here. — David Federspiel, Apr 23 '20 at 03:20
Did you paste your code snippets the wrong way? It looks like you're displaying the values using the first script and storing the values using the second. Also, you say that you are storing/accessing the inputs on different pages, I would check out [this post](https://stackoverflow.com/questions/18709523/why-do-two-web-pages-have-different-localstorage-how-can-i-fix-this) — AJ_, Apr 23 '20 at 03:24

score 0 · Answer 1 · answered Apr 23 '20 at 03:30

Reorganizing based on my comments above. If the two snippets represent the two pages, you should be able to achieve this with the following.

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

Thanks very much @David Federspiel, however the website still does not display anything from the local storage. the Inputs however have been stored in the website url. — Lachlan D, Apr 24 '20 at 01:38

How to retrieve values from local storage

1 Answers1