如何在不同頁面上顯示本地存儲中的內容

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

我試圖像這樣顯示這些輸入

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

但是它沒有顯示我將如何 go 讓它顯示？

Answer 1

如果您確實在使用輸入，則value屬性將是正確的。 對於 HTML 元素，使用innerText （或必要時使用innerHTML ，但要注意安全風險）。

document.getElementById('input1').innerText = localStorage.getItem('EventName');