浏览器页面重载前能否执行长耗时函数？如何保证IndexedDB存储逻辑正常执行

你当前的实现逻辑存在两个浏览器限制级的问题，无法按你的预期运行：

• 浏览器禁止通过代码自动应答「是否重新加载/离开站点」的系统弹窗，这是安全层面的强制限制，避免恶意站点干扰用户的正常离开操作。
• save_user_data_to_indexed_db()是异步操作，浏览器执行onbeforeunload回调时不会等待异步任务完成就会继续执行页面卸载流程；如果弹出了系统确认弹窗，部分浏览器还会直接暂停回调内未完成的代码执行，直到用户手动应答弹窗，这就是你观察到存储函数未执行的原因。

可行的替代方案 #

方案1：同步存储兜底

如果要保存的数据量不大，优先用同步APIlocalStorage做兜底存储，写入完成后再走后续流程，下次页面加载时再把备份数据同步到IndexedDB即可。
示例代码：

window.onbeforeunload = (event) => {
  const e = event || window.event;
  e.preventDefault();

  // 先同步写入localStorage，保证数据不丢失
  const userData = get_current_user_data();
  localStorage.setItem('unsavedUserData', JSON.stringify(userData));
  // 同时触发IndexedDB存储，不需要等待执行结果
  save_user_data_to_indexed_db().catch(() => {});

  if (e) {
    e.returnValue = '';
  }
  return '';
};

// 页面初始化时同步兜底数据
window.addEventListener('load', async () => {
  const unsavedData = localStorage.getItem('unsavedUserData');
  if (!unsavedData) return;
  try {
    await save_user_data_to_indexed_db(JSON.parse(unsavedData));
    localStorage.removeItem('unsavedUserData');
  } catch (err) {
    // 写入失败下次重试即可
  }
});

方案2：自主控制重载流程

如果你的重载操作是代码主动触发的（不是用户手动点刷新/关闭页面），可以自己把控存储和重载的时序，不需要弹出系统确认框：

async function safeReloadPage() {
  // 先等待数据写入IndexedDB完成
  await save_user_data_to_indexed_db();
  // 临时移除beforeunload拦截，避免弹出确认框
  const originBeforeUnload = window.onbeforeunload;
  window.onbeforeunload = null;
  // 执行重载
  location.reload();
  // 异常兜底恢复拦截
  setTimeout(() => {
    window.onbeforeunload = originBeforeUnload;
  }, 0);
}

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