页面跳转后全局变量contacts丢失，函数未执行预期逻辑的问题求助

我一眼就看出问题所在啦——页面跳转后，JavaScript的全局变量是不会跨页面保留的！

当你从test1.html跳转到test2.html时，浏览器会加载一个全新的页面上下文：test2.html会重新加载file1.js，这意味着var contacts = [];会重新执行，把contacts重置为空数组，自然就找不到之前在test1里添加的内容了。

下面给你几种实用的解决方案，按需选择：

方案1：使用localStorage（推荐，适合大多数场景） #

localStorage是浏览器提供的持久化存储方案，数据会保存在浏览器中，跨页面可以直接读取。我们只需要修改file1.js，把contacts的数据存到localStorage，再在需要的时候读取出来：

修改后的file1.js代码：

"use strict"; 
// 初始化时先从localStorage读取数据，没有的话设为空数组
var contacts = JSON.parse(localStorage.getItem('contacts')) || []; 

function func0() { 
  contacts.push('mike'); 
  contacts.push('tom'); 
  contacts.push('joe'); 
  // 把更新后的contacts存到localStorage
  localStorage.setItem('contacts', JSON.stringify(contacts));
  window.location.replace("test2.html"); 
} 

function func1(msgType, uuid) { 
  if(isArrayEmpty(contacts)) { 
    alert("contacts is empty"); 
    return; 
  } 
  contacts.forEach(function(contact) { 
    console.log(contact + " sends msg with type = " + msgType + ", and msg id = " + uuid); 
  }); 
} 

function isArrayEmpty(array) { 
  if (!Array.isArray(array) || !array.length) { 
    return true; 
  } 
  return false; 
}

如果希望数据只在当前会话有效（关闭浏览器就清除），可以把localStorage换成sessionStorage，用法完全一样。

方案2：通过URL参数传递数据 #

如果你的contacts数据量很小，也可以把数据编码后作为URL参数传递给test2.html：

修改file1.js里的func0函数：

function func0() { 
  contacts.push('mike'); 
  contacts.push('tom'); 
  contacts.push('joe'); 
  // 把数组转成字符串并编码，避免特殊字符问题
  const contactsStr = encodeURIComponent(JSON.stringify(contacts));
  window.location.replace(`test2.html?contacts=${contactsStr}`); 
}

然后在file1.js开头添加解析URL参数的逻辑：

"use strict"; 
var contacts = [];

// 解析URL参数里的contacts数据
function getContactsFromUrl() {
  const params = new URLSearchParams(window.location.search);
  const contactsStr = params.get('contacts');
  if (contactsStr) {
    contacts = JSON.parse(decodeURIComponent(contactsStr));
  }
}

// 初始化时调用解析函数
getContactsFromUrl();

// 剩下的func0、func1、isArrayEmpty函数保持不变

这种方案的缺点是URL长度有限制，数据太多的话会失效，而且数据会暴露在地址栏里，不适合敏感信息。

方案3：使用Cookie（适合小数据场景） #

如果需要兼容一些老旧浏览器，或者数据量极小，可以用Cookie存储：

修改func0函数：

function func0() { 
  contacts.push('mike'); 
  contacts.push('tom'); 
  contacts.push('joe'); 
  // 设置Cookie，有效期设为1天（可根据需求调整）
  document.cookie = `contacts=${encodeURIComponent(JSON.stringify(contacts))}; max-age=86400; path=/`;
  window.location.replace("test2.html"); 
}

然后添加读取Cookie的函数：

"use strict"; 
var contacts = [];

// 读取Cookie里的contacts数据
function getContactsFromCookie() {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [name, value] = cookie.split('=');
    if (name === 'contacts') {
      contacts = JSON.parse(decodeURIComponent(value));
      break;
    }
  }
}

// 初始化时调用
getContactsFromCookie();

// 其余函数不变

Cookie的存储大小限制在4KB左右，而且每次请求都会携带，所以只适合很小的数据。

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