如何将变量传入window.open()并在打开的HTML页面中使用？

方法1：通过URL查询参数传递（最常用） #

把变量作为URL的查询参数拼在calculate.html后面，新页面通过解析URL获取参数。

主页面修改后的代码：

<script>
  const Gobtn = document.getElementById("Go");

  Gobtn.addEventListener("click", function () {
    // 点击时才获取最新值，避免页面加载时value为空
    const value = document.getElementById("oper").value;
    // 拼上查询参数，用encodeURIComponent处理特殊字符
    const url = `calculate.html?operValue=${encodeURIComponent(value)}`;
    window.open(url, "_blank");
  });
</script>

calculate.html中获取参数的代码：

<script>
  // 解析URL中的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const value = urlParams.get('operValue');
  // 现在可以直接使用value变量
  console.log(value);
</script>

方法2：利用window.opener访问原页面变量 #

如果两个页面属于同域，新窗口可以通过window.opener直接访问原页面的变量，但要注意原页面不能被关闭，否则opener会失效。

主页面修改后的代码：

<script>
  let value;
  const Gobtn = document.getElementById("Go");

  Gobtn.addEventListener("click", function () {
    value = document.getElementById("oper").value;
    window.open("calculate.html", "_blank");
  });
</script>

calculate.html中获取变量的代码：

<script>
  // 直接访问原页面的value变量
  const value = window.opener.value;
  console.log(value);
</script>

方法3：通过本地存储（localStorage/sessionStorage）传递 #

把变量存在本地存储里，新页面直接读取，适合传递较复杂的数据，且不受原页面关闭影响。

主页面修改后的代码：

<script>
  const Gobtn = document.getElementById("Go");

  Gobtn.addEventListener("click", function () {
    const value = document.getElementById("oper").value;
    // 用sessionStorage存储，关闭浏览器会自动清除；用localStorage则持久保存
    sessionStorage.setItem('operValue', value);
    window.open("calculate.html", "_blank");
  });
</script>

calculate.html中获取变量的代码：

<script>
  const value = sessionStorage.getItem('operValue');
  // 使用后可删除，避免数据残留
  sessionStorage.removeItem('operValue');
  console.log(value);
</script>

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