js判断页面刷新的方法

在网页开发中，有时我们需要知道页面何时被刷新，以便执行特定的操作，比如保存用户输入的数据、更新页面状态等。JavaScript提供了多种判断页面刷新的方法，下面我们就来详细探讨一下。

利用beforeunload和load事件

这是一种较为常用的方法。beforeunload事件会在页面即将卸载（包括刷新、关闭页面等情况）时触发，而load事件则在页面加载完成时触发。我们可以通过在全局作用域中定义变量来记录页面的状态。

let isRefreshing = false;
let firstLoad = true;

window.addEventListener('beforeunload', function () {
    if (!firstLoad) {
        isRefreshing = true;
    }
});

window.addEventListener('load', function () {
    if (isRefreshing) {
        console.log('页面被刷新了');
        isRefreshing = false;
    } else {
        firstLoad = false;
    }
});

在这段代码中，beforeunload事件检测到页面即将卸载，如果不是首次加载，就将isRefreshing设为true。load事件中，若isRefreshing为true，就说明页面是被刷新了，然后重置isRefreshing。

使用sessionStorage

sessionStorage是HTML5新增的会话存储对象，它的数据在关闭浏览器窗口后就会被清除。我们可以利用它的特性来判断页面刷新。

if (sessionStorage.getItem('wasRefreshed')) {
    console.log('页面被刷新了');
    sessionStorage.removeItem('wasRefreshed');
} else {
    sessionStorage.setItem('wasRefreshed', 'true');
}

页面首次加载时，sessionStorage中没有“wasRefreshed”这个键值对，所以会创建它。当页面刷新时，由于sessionStorage中的数据不会丢失，就可以检测到“wasRefreshed”，从而判断页面被刷新，然后移除这个键值对，以便下次判断。

性能监测API

Performance API也能帮助我们判断页面刷新。它提供了关于页面性能的各种信息，我们可以通过比较navigation.type的值来判断。

if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    console.log('页面被刷新了');
}

performance.navigation.type有不同的值，其中TYPE_RELOAD表示页面是通过刷新操作加载的。

不同的方法适用于不同的场景，开发者可以根据项目的具体需求选择合适的方式来准确判断页面是否被刷新，从而更好地优化用户体验和实现特定的业务逻辑。