跳转新页面后JavaScript脚本无法继续执行的问题求助

问题根源 #

你写的window.addEventListener('load')是绑定在原页面的，调用window.location.assign跳转后，原页面的所有JS上下文会被销毁，这个监听根本不会在新页面触发。获取存储值的逻辑必须放在目标页面（/register）的代码里。

修复方案 #

方案1：拆分逻辑到目标页面

原页面代码（触发跳转的页面）：
只保留存储值和跳转的逻辑，去掉无效的load监听：

const changeSelected = (e) => {
  const opcion = document.querySelector('.valor').value;
  window.App2.Storage.setItem("key", opcion);
  window.location.assign("/register");
};
document.querySelector('.button').addEventListener('click', changeSelected);

目标页面代码（/register）：
在这个页面的脚本里添加加载完成后的取值逻辑：

window.addEventListener('load', () => {
  const valor = window.App2.Storage.getItem("key");
  const select = document.querySelector('#plan');
  
  // 确保值存在再赋值，避免报错
  if (valor) {
    select.value = valor; // 注意：valor本身就是存储的字符串，不需要加.value
    console.log(valor);
    
    // 可选：如果不需要长期保留这个值，跳转后可以删除
    // window.App2.Storage.removeItem("key");
  }
});

方案2：路由传参替代存储（适合SPA或简单场景）

如果你的项目是单页应用，或者不想用存储，直接通过URL参数传递值更直接：

原页面代码：

const changeSelected = (e) => {
  const opcion = document.querySelector('.valor').value;
  // 用encodeURIComponent处理特殊字符，避免URL解析错误
  window.location.assign(`/register?plan=${encodeURIComponent(opcion)}`);
};
document.querySelector('.button').addEventListener('click', changeSelected);

目标页面代码（/register）：

window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const valor = urlParams.get('plan');
  const select = document.querySelector('#plan');
  
  if (valor) {
    select.value = valor;
    console.log(valor);
  }
});

额外注意事项 #

• 确认window.App2.Storage在/register页面加载时已经完成初始化，否则会出现Cannot read property 'getItem' of undefined的错误。
• 存储的是字符串类型，直接赋值给select.value即可，不需要额外取.value属性。

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