在Web前端开发中，经常需要在用户刷新页面后弹出提示信息，比如提示用户未保存的表单数据、告知用户上一次操作的结果等。要实现这个功能，核心是要区分页面是首次加载还是刷新加载，同时要在合适的时机触发弹窗逻辑。
实现原理分析
页面刷新的本质是浏览器重新加载当前页面的资源，会触发一系列生命周期事件。要实现刷新后弹窗，需要解决两个核心问题：第一是判断当前页面是否为刷新状态，第二是在页面加载完成后合适的时机触发弹窗。常见的判断刷新状态的方式有两种，一种是利用beforeunload事件结合存储记录刷新标记，另一种是通过浏览器的导航类型判断。
方案一：使用 sessionStorage 记录刷新标记
sessionStorage 是浏览器提供的会话级存储，页面刷新时数据不会丢失，关闭标签页后数据会被清除，非常适合用来记录单次会话中的刷新状态。
实现步骤
- 监听
beforeunload事件，在页面即将卸载时往 sessionStorage 中写入刷新标记 - 在页面 DOM 加载完成后，读取 sessionStorage 中的标记，判断是否为刷新状态
- 如果是刷新状态，触发弹窗，同时清除标记避免后续重复触发
代码示例
// 监听页面卸载前事件，记录刷新标记
window.addEventListener('beforeunload', function() {
sessionStorage.setItem('isPageRefreshed', 'true');
});
// 页面加载完成后判断并触发弹窗
window.addEventListener('DOMContentLoaded', function() {
const isRefreshed = sessionStorage.getItem('isPageRefreshed');
if (isRefreshed === 'true') {
alert('页面已刷新，请注意保存未提交的内容');
// 清除标记，避免下次加载时误判
sessionStorage.removeItem('isPageRefreshed');
}
});
方案二：通过 performance.navigation 判断刷新类型
浏览器的performance API 提供了页面导航相关的信息，其中performance.navigation.type可以返回页面的加载类型，值1代表页面是通过刷新加载的。
代码示例
window.addEventListener('DOMContentLoaded', function() {
// performance.navigation.type 为1表示页面是刷新加载
if (performance.navigation.type === 1) {
alert('检测到页面刷新，上一次的操作结果已保存');
}
});
需要注意的是，performance.navigation API 已经被部分现代浏览器标记为废弃，更推荐使用新的Navigation Timing Level 2规范中的performance.getEntriesByType('navigation')来获取导航信息。
新规范下的判断方式
window.addEventListener('DOMContentLoaded', function() {
const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries.length > 0) {
// type为reload表示页面是刷新加载
if (navigationEntries[0].type === 'reload') {
alert('页面已刷新，请确认当前操作状态');
}
}
});
方案三：结合 localStorage 实现跨标签页刷新提示
如果需要让刷新提示在多个同源标签页中都能生效，可以使用 localStorage 替代 sessionStorage，localStorage 的数据会持久化保存在浏览器中，除非手动清除。
// 页面卸载前写入刷新标记
window.addEventListener('beforeunload', function() {
localStorage.setItem('refreshTipFlag', Date.now().toString());
});
// 页面加载后判断标记
window.addEventListener('DOMContentLoaded', function() {
const flag = localStorage.getItem('refreshTipFlag');
if (flag) {
alert('页面刷新完成，当前数据已自动保存');
// 清除标记，避免下次打开页面时误触发
localStorage.removeItem('refreshTipFlag');
}
});
注意事项
- 弹窗尽量使用浏览器原生的
alert、confirm或者prompt，自定义弹窗需要注意触发时机，避免被页面的其他加载逻辑阻塞 - 如果页面中有表单内容，建议结合
beforeunload事件先提示用户是否确认刷新，再执行刷新后的弹窗逻辑，避免用户误操作丢失数据 - 部分浏览器对
beforeunload事件的自定义提示内容做了限制，只允许显示默认的提示文本，无法自定义内容
实际开发中可以根据需求选择合适的方案，如果是单次会话内的刷新提示优先使用 sessionStorage 方案，如果需要兼容旧浏览器可以使用 performance.navigation 方案，需要持久化标记则选择 localStorage 方案。
JavaScript页面刷新弹窗提示sessionStoragebeforeunload修改时间：2026-07-16 06:18:28