unload

アンロード（イベント）

意味ページが閉じられるときのイベント。

unloadとは？

ページが閉じられる、または新しいページへの遷移が始まるときに発火するイベント。

unloadの具体的な使い方

ページがアンロードされる際にメッセージを表示する例

<button id="triggerUnload">別のページへ移動</button>
<script>
window.addEventListener('unload', function(event) {
  console.log('ページがアンロードされます。さようなら！');
});

document.getElementById('triggerUnload').addEventListener('click', function() {
  window.location.href = 'https://example.com';
});
</script>

ページがアンロードされる際にコンソールにメッセージを出力します。ボタンをクリックすると別のページに移動し、unloadイベントが発火します。

ページアンロード時にローカルストレージにデータを保存する例

let count = 0;

window.addEventListener('unload', function() {
  count++;
  localStorage.setItem('pageVisits', count);
  console.log('ページビュー回数を保存しました：' + count);
});

// ページロード時にカウントを復元
window.addEventListener('load', function() {
  count = parseInt(localStorage.getItem('pageVisits') || '0');
  console.log('現在のページビュー回数：' + count);
});

👇出力結果

現在のページビュー回数：0
ページビュー回数を保存しました：1

ページがアンロードされる際に、ページビュー回数をローカルストレージに保存します。ページがロードされる際に、保存された回数を復元します。

unloadに関するよくある質問

Q. unloadイベントの主な用途は？

A. unloadイベントは主に、ページが閉じられる際のクリーンアップ処理や、ユーザーの行動追跡などに使用されます。ただし、信頼性の問題があるため、使用には注意が必要です。

Q. unloadイベントの制限は？

A. unloadイベントは非同期処理やAjaxリクエストを保証しません。また、一部のブラウザでは動作が不安定な場合があります。代わりにbeforeunloadイベントの使用を検討してください。

Q. unloadとbeforeunloadの違いは？

A. unloadはページが実際に閉じられる際に発火しますが、beforeunloadはユーザーがページを離れようとする時に発火し、確認ダイアログを表示できます。beforeunloadの方が早い段階で発生します。

unloadが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのunloadやdragover、event.bubbles、drag、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。