JavaScript 如何檢測頁面重新加載與刷新？完整方案

核心難點

HTTP 無狀態，瀏覽器不主動告知「是刷新還是首次加載」。需通過**客戶端狀態標記**來推斷。

方案一：SessionStorage 標記首次加載（推薦）

// 頁面入口腳本（越早執行越好）
(function() {
    const KEY = 'page_loaded_flag';
    const isReload = sessionStorage.getItem(KEY) === 'true';
    
    if (isReload) {
        console.log('頁面被重新加載/刷新了');
        // 執行刷新邏輯：恢復表單、刷新數據等
    } else {
        console.log('首次加載');
    }
    
    // 標記已加載
    sessionStorage.setItem(KEY, 'true');
    
    // 可選：頁面卸載時清理（視業務而定）
    window.addEventListener('beforeunload', () => {
        // sessionStorage 隨標籤頁關閉自動清理，通常無需手動清除
    });
})();

方案二：Performance Navigation Timing API（現代瀏覽器）

// 獲取導航類型
const navEntry = performance.getEntriesByType('navigation')[0];
if (navEntry) {
    switch (navEntry.type) {
        case 'navigate':    console.log('正常導航進入'); break;
        case 'reload':      console.log('用戶點擊刷新 / F5 / Cmd+R'); break;
        case 'back_forward':console.log('歷史前進/後退'); break;
        case 'prerender':   console.log('預渲染'); break;
        default:            console.log('其他方式');
    }
}

兼容性：Chrome 60+、Firefox 58+、Edge 79+、Safari 15.4+。舊版瀏覽器可回退 performance.navigation.type（已棄用）。

方案三：頁面關閉前持久化狀態到 LocalStorage

// 頁面卸載前保存關鍵狀態
window.addEventListener('beforeunload', () => {
    const state = { scrollY: window.scrollY, formData: collectFormData() };
    localStorage.setItem('page_state_backup', JSON.stringify(state));
});

// 頁面加載時恢復
const backup = localStorage.getItem('page_state_backup');
if (backup) {
    const state = JSON.parse(backup);
    window.scrollTo(0, state.scrollY);
    restoreFormData(state.formData);
    localStorage.removeItem('page_state_backup'); // 用完即刪
}

方案對比表

最佳實踐建議

1. 首選 performance.navigation.type（含 polyfill） 精確識別刷新/前進後退。
2. 輔以 sessionStorage 標記會話內重複加載。
3. 關鍵業務狀態（表單、滾動位置）用 beforeunload + sessionStorage 即時保存恢復。
4. 避免依賴 onbeforeunload 彈窗阻攔刷新，現代瀏覽器多已限制。

組合使用上述方案，即可全方位感知頁面加載上下文，構建更智能的用戶體驗。