如何将一个页面中设置的JS变量传递到另一个页面的JS文件中

这个问题很典型——客户端JS变量x在页面跳转后会被重置，所以得通过客户端→服务端传递或者客户端本地存储两种思路来实现，下面给你几个实用的方案：

方案1：通过表单隐藏域提交（推荐，适合表单场景） #

既然你已经有提交到page2.php的表单，最直接的方式是把x的值存到表单的隐藏域里，提交时一起传给服务端，再在page2.php里读取。

步骤： #

1. 在page1.php的表单里添加一个隐藏输入框：

<form action="page2.php" method="post">
  <!-- 其他表单元素 -->
  <input type="hidden" name="x_value" id="x-hidden">
  <button type="submit" id="increment-btn">点击自增并提交</button>
</form>

2. 修改page1.js，每次点击按钮时，不仅让x自增，还要同步更新隐藏域的值：

var x = 1;
document.getElementById('increment-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 先阻止默认提交，完成自增后再手动提交
  x++;
  // 更新隐藏域的值
  document.getElementById('x-hidden').value = x;
  // 手动提交表单
  this.form.submit();
});

3. 在page2.php里通过$_POST获取值：

<?php
// 检查是否存在x_value参数
if(isset($_POST['x_value'])) {
  $x = $_POST['x_value'];
  echo "获取到的x值是：" . $x;
}
?>

方案2：通过URL参数传递（简单直观，适合GET场景） #

如果你的表单是GET方法，或者想把值暴露在地址栏，可以把x拼到表单的action地址里。

步骤： #

1. 在page1.js里修改表单的action属性，把x作为参数追加：

var x = 1;
document.getElementById('increment-btn').addEventListener('click', function(e) {
  e.preventDefault();
  x++;
  // 修改表单action，带上x参数
  this.form.action = "page2.php?x=" + x;
  this.form.submit();
});

2. 在page2.php里通过$_GET获取：

<?php
if(isset($_GET['x'])) {
  $x = $_GET['x'];
  echo "获取到的x值是：" . $x;
}
?>

方案3：通过客户端本地存储（无需服务端参与） #

如果不想通过服务端传递，可以用localStorage或sessionStorage把x存在浏览器里，page2.php加载时再读取。

步骤： #

1. 修改page1.js，每次点击时把x存入本地存储：

var x = 1;
document.getElementById('increment-btn').addEventListener('click', function(e) {
  e.preventDefault();
  x++;
  // 存入sessionStorage（会话结束后消失），也可以用localStorage（持久化存储）
  sessionStorage.setItem('x_value', x);
  this.form.submit();
});

2. 在page2.php的JS文件（page2.js）里读取：

window.onload = function() {
  var x = sessionStorage.getItem('x_value');
  if(x) {
    console.log("获取到的x值是：" + x);
    // 可以把值显示到页面上
    document.body.innerHTML += "<p>获取到的x值是：" + x + "</p>";
  }
}

注意： #

• sessionStorage仅在当前会话有效，关闭标签页后数据会丢失；localStorage会一直存在，直到手动清除。
• 这种方式是客户端读取，不会传到服务端，如果需要服务端处理x的值，还是推荐方案1或2。

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