瀏覽器返回上頁時畫面不同步問題

2025-07-11

今天遇到一個問題，就是當瀏覽器進行返回上頁的動作時，畫面有部分是正確的，有部分不正確，經過查詢後得知以下結論。
瀏覽器在離開當前頁面時，並不會存取當前頁面的狀態包括:

瀏覽器「上一頁」會自動還原什麼？

✅ ✅ 自動儲存（不需你寫任何 JS）：

元素類型	是否自動還原？	說明
`<input type="text">`	✅ 是	保留使用者輸入內容
`<textarea>`	✅ 是	保留文字輸入
`<select>`	✅ 是	保留選取項目
`<input type="checkbox">`	✅ 是	若使用者操作過會記住
`<input type="radio">`	✅ 是	同上
`<form>` 的內部欄位	✅ 是	整體保留輸入內容
滾動位置	✅ 是（部分瀏覽器）	像 Chrome/Safari 會自動保留 scrollY

這些都是瀏覽器預設會還原使用者操作的表單狀態，你不需寫任何程式碼。

❌❌ 不會自動儲存的內容：

元素類型	是否自動還原？	說明
DOM 自己變動的狀態（ex: 加 class、隱藏、顯示）	❌ 不會	你用 JS 改變的 UI 狀態（如 `.classList.add('active')`）不會記錄
JS 動態產生的元素	❌ 不會	例如你用 JS 插入的比較清單項目
Modal 展開狀態、tabs 切換狀態	❌ 不會	除非你手動儲存再還原
比較項目、加入購物車、UI 效果	❌ 不會	要用 `sessionStorage` 或 `history.state` 實作

針對此狀況，可以透過瀏覽器的返回事件，進行強制重新載入畫面的方法，將以下代碼放置於head的最上方即可，這樣當頁面進入後，還沒進入任何處理就會先進行重新載入，確保頁面可以處於最新狀態的畫面

{{-- 強制瀏覽器返回上頁進行頁面重新載入，防止資料狀態沒有更新 --}}
<script>
const isBack = (() => {
try {
const nav = performance.getEntriesByType("navigation")[0];
return nav?.type === "back_forward" || performance.navigation.type === 2;
} catch {
return false;
}
})();
if (isBack) {
location.reload();
}
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
location.reload();
}
});
</script>

當然，此方法是最容易，且最安全的處理方式，但不代表最佳且最有效率的處理方法，在現今的前端開發模式下，最好能將資料及畫面做分割，將資料都存在storage內，這樣一來，就能確保返回畫面時，資料能夠是最新的。

若是要安全一點，可以把資料存在服務器端，每次都從服務器加載，雖然這樣一來會增加頁面載入的請求，但是至少部會把整個網頁的結構搞得支離破碎。

JS 繫結資料說明 JS筆記 jQuery 衝突解決方式

Contact

Github

Codepen

Visitors【925566】