JavaScript跳转页面后如何访问原页面的变量？

当你通过window.location.href跳转页面时，浏览器会完全加载新页面，原页面的所有JavaScript上下文（包括变量、函数）都会被销毁，所以新页面根本无法访问原页面的data变量和定义的函数，这就是你遇到问题的原因。

下面是几种可行的解决方法：

方法1：通过URL参数传递数据 #

把需要的data转成JSON字符串并编码后，作为URL参数携带到新页面，适合数据量不大的场景：

原页面修改代码： #

function getData(key) {
  fetch(key)
    .then(res => res.json())
    .then((json) => {
      // 将数据转成JSON字符串并编码，避免特殊字符问题
      const encodedData = encodeURIComponent(JSON.stringify(json));
      // 拼接参数到目标页面URL
      window.location.href = `Live Weather.html?data=${encodedData}`;
    })
}

新页面（Live Weather.html）读取数据： #

window.addEventListener('load', () => {
  // 获取URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const dataStr = urlParams.get('data');
  
  if (dataStr) {
    // 解码并解析回JSON对象
    const data = JSON.parse(decodeURIComponent(dataStr));
    // 这里就可以使用data变量了
    console.log(data);
  }
});

注意：URL有长度限制（不同浏览器略有差异，一般在2KB左右），如果data体积过大，不适合用这种方法。

方法2：使用本地存储（localStorage/sessionStorage） #

把数据存在浏览器的本地存储中，新页面直接读取，适合数据量稍大的临时数据：

原页面修改代码： #

function getData(key) {
  fetch(key)
    .then(res => res.json())
    .then((json) => {
      // 把数据转成JSON字符串存入localStorage
      localStorage.setItem('weatherData', JSON.stringify(json));
      // 跳转页面
      window.location.href = 'Live Weather.html';
    })
}

新页面读取数据： #

window.addEventListener('load', () => {
  const dataStr = localStorage.getItem('weatherData');
  
  if (dataStr) {
    const data = JSON.parse(dataStr);
    // 使用数据
    console.log(data);
    
    // 用完后建议删除，避免数据残留
    localStorage.removeItem('weatherData');
  }
});

如果只需要在当前会话中保存数据，可以用sessionStorage替代localStorage，它会在浏览器关闭后自动清除。

关于原页面函数的问题 #

原页面定义的函数在新页面无法调用，因为新页面的JS环境是独立的。你需要把这些函数：

• 直接复制到新页面的JS代码中
• 封装成独立的公共JS文件，然后在两个页面中都引入这个文件

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