导航至新HTML页面后，JavaScript变量是否会被销毁？

嘿，这个问题问到点子上了，这是前端开发里关于页面执行上下文的核心知识点之一！

当你通过window.location.href、点击普通链接、提交表单这类方式导航到全新页面时，原页面的所有JavaScript相关内容会经历彻底的“清零”流程：

• 变量、函数、对象会被完全销毁：浏览器会卸载原页面的整个文档（DOM树、CSSOM、JavaScript执行上下文），所有存在于内存中的变量、函数实例、自定义对象都会被标记为“可回收”，随后被浏览器的垃圾回收机制清理干净，再也无法被访问。
• 举个实际例子：假设你在原页面写了这段代码：

  let userName = "Ollie";
  function greet() {
    console.log(`Hello ${userName}!`);
  }
  greet(); // 输出 Hello Ollie!
  

  当你用window.location.href = "/new-page"跳转到新页面后，打开控制台输入userName或者greet()，会直接抛出ReferenceError——因为这些变量和函数已经随着原页面的执行上下文一起消失了。

这里要注意一个例外场景：如果是单页应用（SPA）的前端路由跳转（比如React Router、Vue Router的页面切换），这种情况并没有真正加载新页面，只是通过修改URL的hash或History API来切换页面组件，原页面的执行上下文始终存在，所以变量还能被访问。但你问的window.location.href属于“硬跳转”，和SPA的路由完全是两回事。

如果需要在页面间传递数据，你得用这些专门的方式：

• localStorage/sessionStorage：存储在浏览器本地，跨页面可读取（sessionStorage仅在同会话有效）
• Cookie：小容量的键值对数据，可随请求发送到服务器
• URL参数：把数据拼接在跳转URL的查询字符串里
• 服务器端存储：比如把数据存在数据库，新页面再请求获取

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