如何实现登录后首次加载仅调用一次JavaScript函数，浏览器刷新不再执行

核心思路 #

用会话存储（sessionStorage） 记录代码执行状态——它的生命周期和浏览器标签页绑定，刷新页面不会丢失状态，标签关闭后自动清除，完美匹配登录会话的场景。全局变量之所以不行，是因为页面刷新时内存会重置，状态直接丢失。

代码实现 #

页面加载检查逻辑

window.addEventListener('DOMContentLoaded', () => {
  // 读取是否已执行过首次加载逻辑的标记
  const hasRun = sessionStorage.getItem('firstLoadAfterLogin');

  if (!hasRun) {
    // 这里放你要在首次加载时执行的代码
    console.log('这行代码只会在登录后首次加载时跑');
    // 设置标记，避免后续刷新重复执行
    sessionStorage.setItem('firstLoadAfterLogin', 'done');
  }
});

配合登录/退出逻辑

• 登录成功时，记得清除标记，确保新的登录会话能触发首次执行：

function onLoginSuccess() {
  // 清除旧标记
  sessionStorage.removeItem('firstLoadAfterLogin');
  // 其他登录成功后的操作，比如跳转首页...
}

• 如果需要跨标签页生效（比如用户新开标签页登录），可以改用localStorage，但要在退出登录时清除标记：

function onLogout() {
  localStorage.removeItem('firstLoadAfterLogin');
  // 其他退出操作...
}

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