在web开发中判断页面是否刷新的五种技术方案

在Web开发过程中，有时我们需要知道页面是否因为用户操作而重新加载，比如用户按下了F5键或者点击了浏览器的刷新按钮。这种需求在诸如Vue.js这样的框架中尤为重要，因为它可能影响到前端路由的动态配置或者是用户的权限控制。本文将介绍五种常见的判断web页面是否刷新的技术方案，并讨论它们各自的适用场景、优缺点以及浏览器兼容性。

一、使用 window.name

window.name 是一个特殊的属性，它的值在页面刷新甚至是标签页切换时都会被保留下来。这一特性使得它成为一个不错的选项来标识页面的状态。

代码示例

window.onload = function() {
  if (window.name === 'isRefreshed') {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
    window.name = 'isRefreshed';
  }
};

工作原理

• 首次加载时，window.name 是空字符串，通过设置它为 'isRefreshed' 来标记状态。
• 刷新页面后，window.name 仍然为 'isRefreshed'，从而可以判断页面是通过刷新加载的。

优点

• 简单易用，不依赖外部存储机制或服务器端逻辑。
• 跨页面持久性，适合跨页面场景。

缺点

• 安全性问题，window.name 的值在不同页面间共享，可能被其他页面读取。
• 手动清理，例如在页面关闭时需要清除 window.name。

兼容性 window.name 是一个非常老的Web API，在所有主流浏览器中都有广泛的支持。

二、使用 sessionStorage

sessionStorage 是Web存储API的一部分，它为每个标签页维持独立的存储空间。这使得它成为判断页面是否刷新的一个好选择，特别是在单页应用(SPA)场景中。

代码示例

window.onload = function() {
  if (sessionStorage.getItem('isRefreshed')) {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
  sessionStorage.setItem('isRefreshed', true);
};

工作原理

• 当页面首次加载时，sessionStorage 中没有 'isRefreshed' 条目，可以判断这是首次加载。
• 设置 sessionStorage.setItem('isRefreshed', true) 标记页面已加载。
• 刷新页面后，sessionStorage 中的 'isRefreshed' 条目仍然存在，因此可以检测到刷新操作。

优点

• 简单且不依赖服务器端逻辑。
• 只对当前标签页有效，适合SPA场景。

缺点

• 关闭标签页或浏览器窗口后，sessionStorage 会被清空，无法保存状态。

兼容性 sessionStorage 是广泛支持的API，在所有主流浏览器中都可用。

三、使用 performance.navigation API

performance.navigation API 提供了页面加载的详细信息，通过检查 performance.navigation.type 属性可以判断页面是否通过刷新加载。

代码示例

window.onload = function() {
  if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
};

工作原理

• performance.navigation.TYPE_RELOAD 表示页面通过刷新加载。
• 其他类型（如 TYPE_NAVIGATE）表示正常导航。

优点

• 直接提供了判断页面刷新与否的接口，较为精确。
• 不需要手动存储状态。

缺点

• 该API正在逐步弃用，未来的浏览器可能不会支持。
• 不适合长期维护的项目。

兼容性 performance.navigation API 在大多数浏览器中都被支持，但该API已被弃用。

四、使用 beforeunload 事件

beforeunload 事件在用户离开页面前触发，可以在该事件中设置一个标志位来判断用户是否通过刷新离开当前页面。

代码示例

window.addEventListener('beforeunload', function() {
  localStorage.setItem('isRefreshed', 'true');
});

window.onload = function() {
  if (localStorage.getItem('isRefreshed') === 'true') {
    console.log('页面被刷新');
    localStorage.removeItem('isRefreshed');
  } else {
    console.log('首次加载页面');
  }
};

工作原理

• 在页面卸载时（包括刷新），通过 beforeunload 事件设置一个标志位。
• 页面重新加载时，根据该标志位判断页面是否通过刷新操作加载。

优点

• 灵活，可以处理不同类型的页面离开操作。
• localStorage 的数据不会在页面关闭时清除，因此可以用于判断跨页面的刷新。

缺点

• beforeunload 事件在部分浏览器（尤其是移动端）可能表现不一致。
• 如果用户清除了浏览器缓存或 localStorage，则无法正确判断。

兼容性 beforeunload 事件在大多数现代浏览器中都有广泛支持，但在一些移动端浏览器上表现不一致。

五、使用 performance.getEntriesByType

performance.getEntriesByType("navigation") 是一个现代Web性能API，可以通过检查返回的 PerformanceNavigationTiming 对象的 type 属性来判断页面加载的方式。

代码示例

window.onload = function() {
  const [navigationEntry] = performance.getEntriesByType('navigation');
  
  if (navigationEntry && navigationEntry.type === 'reload') {
    console.log('页面被刷新');
  } else {
    console.log('首次加载页面');
  }
};

工作原理

• performance.getEntriesByType('navigation') 返回一个包含页面导航详细信息的对象数组。
• 通过检查 navigationEntry.type，可以确定页面加载的类型。

优点

• 现代性，performance.getEntriesByType 是较新的API，能够在现代浏览器中准确区分页面的导航方式。
• 详细信息，除了判断页面刷新，还可以获取更多关于页面加载性能的数据，如DNS解析时间、请求时间等。

缺点

• 浏览器兼容性，虽然大多数现代浏览器支持此API，但旧版浏览器不支持。
• 不适用于多次刷新的情况。

兼容性 performance.getEntriesByType 在现代浏览器中得到广泛支持，但旧浏览器不支持。

总结

判断页面是否刷新是一个常见的需求，本文介绍了五种技术方案。每种方案都有其特定的适用场景和优缺点。如果需要简单、跨页面的刷新判断，window.name 是一个不错的选择；而在需要更精确、现代化的判断方式时，performance.getEntriesByType 提供了更高的灵活性。开发者应根据具体应用场景和目标用户群体的特点来选择最合适的方案。

本文被 前端开发 专题收录