如何在JavaScript中跨HTML页面使用变量？表单提交后用户名无法显示

哦，这个问题我之前做静态表单的时候也踩过坑！核心原因很简单：当用户提交表单跳转到感谢页面时，原来的表单页面已经被浏览器彻底卸载了，感谢页面的DOM里根本不存在.name这个输入框，所以你的document.querySelector(".name")会返回null，自然拿不到任何值~

下面给你几个实用的纯前端解决方案，按需选就行：

方法1：URL参数传递（最简单的纯静态方案） #

这个方式不需要后端支持，数据会拼在URL里传递，适合对隐私要求不高的场景。

第一步：修改表单提交逻辑 #

要么直接用HTML原生表单的GET方法：

<!-- 表单页面的代码 -->
<form action="thank-you.html" method="GET">
  <input type="text" name="username" class="name" placeholder="请输入姓名">
  <button type="submit">提交</button>
</form>

要么用JS手动控制跳转（更灵活）：

// 表单页面的JS
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  const userName = document.querySelector(".name").value;
  // 用encodeURIComponent处理特殊字符（比如中文、空格）
  window.location.href = `thank-you.html?name=${encodeURIComponent(userName)}`;
});

第二步：感谢页读取参数 #

// 感谢页的JS
window.addEventListener('load', function() {
  // 解析URL里的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const name = urlParams.get('name') || '朋友'; // 没拿到值就用默认称呼
  document.getElementById("savedText").innerHTML = `Thank you for signing up ${name}!`;
});

方法2：LocalStorage临时存储（不暴露数据在URL） #

如果不想让用户姓名出现在URL里，可以用浏览器的本地存储临时存一下：

第一步：表单提交时存储姓名 #

// 表单页面的JS
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const userName = document.querySelector(".name").value;
  // 把姓名存到localStorage
  localStorage.setItem('submittedUserName', userName);
  // 跳转到感谢页
  window.location.href = 'thank-you.html';
});

第二步：感谢页读取并清理存储 #

// 感谢页的JS
window.addEventListener('load', function() {
  const name = localStorage.getItem('submittedUserName') || '朋友';
  document.getElementById("savedText").innerHTML = `Thank you for signing up ${name}!`;
  // 用完一定要清除，避免用户下次打开感谢页还显示旧数据
  localStorage.removeItem('submittedUserName');
});

额外提醒 #

如果你的表单是用POST方法提交且没有后端处理，纯前端是拿不到POST数据的，这种情况必须用上面两种方法之一来传递数据哦。

内容的提问来源于stack exchange，提问作者Aromal M.