如何实现跨HTML页面调用JS函数，展示另一页面输入的用户名？

核心问题是两个页面属于独立的浏览器文档，无法直接访问彼此的DOM元素，得通过**本地存储（localStorage）**来持久化和读取用户名，这完全符合你无后端的PWA需求。

1. 修改设置页（settings.html） #

添加保存逻辑，把输入的用户名存入localStorage：

<h3>Your name</h3>
<input id="Name" value="Dummy" type="text" />
<button onclick="saveUserName()">Save Name</button>

<script>
function saveUserName() {
  const userName = document.getElementById('Name').value;
  localStorage.setItem('userName', userName);
}
</script>

2. 修改主页面（index.html） #

调整加载逻辑，从localStorage读取用户名并显示：

<body onload="loadUserName()">
    <div class="Top">
      <h3>Hello <span id="Name"></span></h3>
      <a href="Settings.html">
        <button>Settings</button>
      </a>
    </div>

<script>
function loadUserName() {
  const savedName = localStorage.getItem('userName') || 'Dummy';
  document.getElementById('Name').textContent = savedName;
}
</script>
</body>

额外优化建议 #

• 可以给设置页加自动保存，不用手动点按钮：

  <input id="Name" value="Dummy" type="text" oninput="saveUserName()" />
  

• 建议把两个页面的ID区分开（比如设置页用userNameInput，主页用greetingName），避免语义混淆。

内容的提问来源于stack exchange，提问作者Philip