如何从本地存储中检索值答案

【问题标题】：How to retrieve values from local storage如何从本地存储中检索值
【发布时间】：2020-04-23 11:30:53
【问题描述】：

在我的提醒应用中，我从本地存储中的输入收集信息，我想在应用的另一个页面上显示这些输入。我将这些值输入到我的本地存储中，如下所示：

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

【问题讨论】：

当你调用.getItem()时存储项是否存在？
从您的示例中，您似乎只需将顶部示例中的相同脚本添加到底部代码 sn-p 即可将项目从本地存储中取出 - 也可以移动按钮处理程序（myFunction ) 到顶部脚本。您的 H2 永远不会从这里的本地存储中分配值。
您的代码 sn-ps 粘贴方式是否错误？看起来您正在使用第一个脚本显示值并使用第二个脚本存储值。另外，您说您正在存储/访问不同页面上的输入，我会查看this post

标签： javascript html local-storage

【解决方案1】：

根据我上面的 cmets 进行重组。如果两个sn-ps代表两个页面，你应该可以通过以下方式实现。

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

【讨论】：

非常感谢@David Federspiel，但是该网站仍然没有显示本地存储中的任何内容。但是，输入已存储在网站 url 中。