JavaScript 怎样判断页面刷新

在网页开发中，有时我们需要知道页面何时被刷新，以便执行特定的操作，比如保存用户临时数据、重置某些状态等。使用 JavaScript 可以实现对页面刷新的判断，以下为您详细介绍相关方法。

利用 beforeunload 和 pageshow 事件

beforeunload 事件会在页面即将卸载（包括刷新、关闭等情况）时触发，而 pageshow 事件会在页面加载或重新加载时触发。通过结合这两个事件，我们可以实现对页面刷新的判断。

在全局作用域中定义一个变量来标记页面是否首次加载，例如：

let isFirstLoad = true;

然后，为 beforeunload 事件添加监听器：

window.addEventListener('beforeunload', function () {
    // 这里可以执行一些在页面卸载前的操作，比如保存数据
});

接着，为 pageshow 事件添加监听器：

window.addEventListener('pageshow', function (event) {
    if (isFirstLoad) {
        isFirstLoad = false;
    } else {
        if (event.persisted) {
            // 页面是从缓存中加载，即刷新
            console.log('页面被刷新了');
        }
    }
});

在上述代码中，event.persisted 属性表示页面是否从缓存中加载。如果 event.persisted 为 true，说明页面是被刷新的。

对比时间戳

另一种方法是通过对比页面加载和卸载时的时间戳。在页面加载时记录一个时间戳，在 beforeunload 事件中再记录一个时间戳，通过比较这两个时间戳的差值来判断页面是否被刷新。

let loadTime = new Date().getTime();
window.addEventListener('beforeunload', function () {
    let unloadTime = new Date().getTime();
    if (unloadTime - loadTime < 1000) {
        // 时间差值较小，可能是页面刷新
        console.log('页面可能被刷新了');
    }
});

这种方法有一定的局限性，因为它只是根据时间差值来推测页面是否刷新，可能会受到用户操作速度等因素的影响，但在一些场景下也能满足需求。

通过这些方法，开发者可以灵活地判断页面是否被刷新，并根据业务需求执行相应的逻辑，从而提升用户体验和优化网页性能。