js 判断浏览器是否刷新

在JavaScript中，判断浏览器是否刷新可以通过多种方法实现，以下是一种常见的方法：

基本思路

1. 利用sessionStorage：在页面加载时设置一个标志，如果这个标志已经存在，则说明页面是刷新的。
2. 利用performance.navigation：这个API可以提供页面导航的信息，包括是否是通过刷新加载的。

实现方法

方法一：使用sessionStorage

// 在页面加载时执行
window.addEventListener('load', function() {
    if (sessionStorage.getItem('isPageRefreshed') === 'true') {
        console.log('页面是通过刷新加载的');
    } else {
        console.log('页面是首次加载的');
        sessionStorage.setItem('isPageRefreshed', 'true');
    }
});

解释：

• 当页面首次加载时，sessionStorage中没有isPageRefreshed项，因此会设置该项为true。
• 如果页面是通过刷新加载的，sessionStorage中已经有isPageRefreshed项，且值为true，因此可以判断页面是通过刷新加载的。

方法二：使用performance.navigation

if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    console.log('页面是通过刷新加载的');
} else {
    console.log('页面是首次加载的或通过其他方式导航来的');
}

解释：

• performance.navigation.TYPE_RELOAD的值为1，表示页面是通过刷新加载的。
• 其他值（如0表示通过导航加载，2表示通过历史记录加载）可以用来区分不同的加载方式。

注意事项

• performance.navigation API在一些现代浏览器中可能已经被弃用，建议使用performance.getEntriesByType('navigation')来替代。

方法三：使用performance.getEntriesByType

window.addEventListener('load', function() {
    const navigationEntries = performance.getEntriesByType('navigation');
    if (navigationEntries.length > 0 && navigationEntries[0].type === 'reload') {
        console.log('页面是通过刷新加载的');
    } else {
        console.log('页面是首次加载的或通过其他方式导航来的');
    }
});

解释：

• performance.getEntriesByType('navigation')返回一个包含导航信息的数组。
• 检查数组中的第一个元素（通常是当前页面的导航信息），如果其type属性为reload，则表示页面是通过刷新加载的。

应用场景

• 数据初始化：在页面刷新时，可能需要重新初始化一些数据或状态。
• 用户体验优化：根据页面加载方式，可以提供不同的用户体验，例如在刷新时显示加载动画。
• 统计分析：记录页面刷新次数，用于分析用户行为。

通过以上方法，你可以有效地判断浏览器是否刷新，并根据需要执行相应的逻辑。