JavaScript 中更简单的 LocalStorage 示例答案

【问题标题】：Easier LocalStorage example in JavaScriptJavaScript 中更简单的 LocalStorage 示例
【发布时间】：2018-04-17 09:05:36
【问题描述】：

我知道有类似的问题，但是你能以最简单的方式解释当用户在一个页面中插入数据时我如何使用 localStorage，但是这个数据应该在另一个文件中使用。

例如在registration.html中我们有：

<input name="name" type="text" id="firstname"> <input type="button" value="OK" >

在cabinet.html中我想看：

你好，输入的名字

我需要使用 JavaScript 来实现它。

【问题讨论】：

你有没有尝试过？网上有大量关于这个简单任务的示例和文档。你从你的研究中学到了什么？究竟是什么不起作用？
localStorage 在同一域上的页面之间共享，使用方式与在任何其他页面上相同。如果正在寻找基于事件的解决方案，请参阅 StorageEvent

标签： javascript html forms local-storage

【解决方案1】：

在客户端存储方面，您有两种选择。本地存储和会话存储。区别在于 SessionStorage 在会话关闭（例如浏览器关闭）时被清除，而 LocalStorage 在 Web 浏览器数据被清除（例如 cookie 等）时被清除

如何使用：

LocalStorage.setItem("name", "John Doe");
LocalStorage.getItem("name");
SessionStorage.setItem("name", "John Doe");
SessionStorage.getItem("name");

这些可以在任何页面上工作。例如，您可以在一个页面上使用“setItem”，而在另一个页面上使用“getItem”。

【讨论】：

【解决方案2】：

registration.html：

<form id="registration-form">
  <input name="name" type="text" id="firstname" />
  <input type="submit" />
</form>
<script type="text/javascript">
  document.getElementById('registration-form')
    .addEventListener('submit', function (event) {
      event.preventDefault();
      localStorage.setItem('name', document.getElementById('firstname').value);
    });
</script>

cabinet.html：

<div>
  Hello, <span id="name" />
</div>
<script type="text/javascript">
  document.getElementById('name').textContent = localStorage.getItem('name');
</script>

【讨论】：

@АдольфінаБучинська 你有机会尝试这个例子吗^^^？