ブラウザの戻るを押した際のキャッシュ表示例 (onpageshowあり)

現在の日時は

iwb.jpにアクセスして戻るボタンを押して、 このページに戻っても日時が更新されます。

<p>現在の日時は<span id="date"></span></p>
<p>
  <a href="https://iwb.jp/">iwb.jp</a>にアクセスして戻るボタンを押して、
  <strong>このページに戻っても日時が更新されます。</strong>
</p>

const date = document.getElementById('date')
date.textContent = new Date().toLocaleString()

window.onpageshow = function(event) {
  const messageDiv = document.getElementById('message')
  if (event.persisted) {
    // ページがキャッシュから復元された場合
    messageDiv.textContent = 'このページはキャッシュから復元されました。'
    date.textContent = new Date().toLocaleString()
  } else {
    // ページが通常の方法で読み込まれた場合
    messageDiv.textContent = 'このページが新しく読み込まれました。'
  }
}

元記事を表示する