如何仅用JS从一个HTML表单获取数据并在另一HTML页面展示

问题1解答：可以仅使用一个JS文件实现该需求 #

实现方式如下：
将两个页面所需的逻辑都写入同一个JS文件，两个HTML页面都引入该文件即可。逻辑中通过判断当前页面是否存在对应元素，执行对应页面的业务代码，示例如下：

// 公共JS文件（比如命名为common.js）
// 第一个页面逻辑：处理用户名存储
const loginInput = document.getElementById('login')
const logarBtn = document.getElementById('logar')
const tipEl = document.getElementById('spanlogin')
if (loginInput && logarBtn && tipEl) {
  logarBtn.addEventListener('click', function(e) {
    const inputVal = loginInput.value.trim()
    // 非空校验
    if (!inputVal) {
      e.preventDefault() // 阻止跳转
      tipEl.textContent = '请输入用户名后再登录'
      return
    }
    localStorage.setItem('thelogin', inputVal)
  })
}

// 第二个页面逻辑：处理用户名展示
const showLoginEl = document.getElementById('showlogin')
if (showLoginEl) {
  window.addEventListener('load', function() {
    const savedLogin = localStorage.getItem('thelogin')
    showLoginEl.textContent = savedLogin || '未获取到登录信息'
  })
}

两个HTML页面都将引入的JS路径改为该公共文件即可：

<script src="common.js"></script>

问题2解答：你的代码无法正常运行有两个核心问题 #

问题1：第一个页面存储时机错误 #

你当前的JS逻辑是页面加载完成后立刻读取输入框的值存入localStorage，此时用户还没有输入任何内容，存入的永远是空字符串。你需要将存储逻辑绑定到「点击登录按钮」的事件上，在跳转前读取用户输入的内容存储。

问题2：第二个页面事件绑定错误 #

你写的window.onload = showthelogin()是直接执行showthelogin函数，此时页面DOM还没有完成渲染，找不到id为showlogin的元素，导致赋值失败。正确的写法是去掉函数后的括号，将函数本身绑定给onload事件：

// 正确写法1
window.onload = showthelogin
// 更推荐的写法2，避免事件覆盖
window.addEventListener('load', showthelogin)

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