js 如何区分页面刷新还是关闭

在JavaScript中，要区分浏览器是关闭还是刷新，可以通过监听 beforeunload 事件和 unload 事件，并结合 sessionStorage 来实现。下面是一个示例代码，展示了如何区分这两种情况：

// 页面加载时执行
window.onload = function() {
    // 检查 sessionStorage 中是否有标记
    if (sessionStorage.getItem('isRefreshed') === 'true') {
        console.log('页面被刷新');
        sessionStorage.removeItem('isRefreshed'); // 清除标记
    } else {
        console.log('页面被加载');
    }
};

// 监听 beforeunload 事件
window.addEventListener('beforeunload', function(event) {
    // 设置 sessionStorage 标记
    sessionStorage.setItem('isRefreshed', 'true');
});

// 监听 unload 事件
window.addEventListener('unload', function(event) {
    // 页面关闭时执行的操作
    console.log('页面被关闭');
});

解释：

1. 页面加载时 (window.onload)：

   • 检查 sessionStorage 中是否有 isRefreshed 标记。
   • 如果有标记，说明页面被刷新，输出 "页面被刷新" 并移除标记。
   • 如果没有标记，说明页面是首次加载，输出 "页面被加载"。

2. 监听 beforeunload 事件：

   • 当用户尝试离开页面（刷新或关闭）时，设置 sessionStorage 中的 isRefreshed 标记为 true。

3. 监听 unload 事件：

   • 当页面完全卸载时，输出 "页面被关闭"。

通过这种方式，可以区分浏览器是关闭还是刷新。需要注意的是，beforeunload 和 unload 事件在某些浏览器中可能会有一些限制，特别是在涉及到弹出对话框时。因此，在实际应用中，要确保代码的兼容性和用户体验。