ブラウザのウィンドウやタブを閉じたときにlocalStorageのデータを削除する方法

localStorageは自動的には消えない

localStorageに保存されたデータは、明示的に削除しない限りブラウザ内に残り続けます。そのため、「タブやウィンドウを閉じたらデータも消したい」というケースでは、何らかの仕組みを自分で実装する必要があります。

window.onunloadイベントを使う方法

タブやウィンドウが閉じられるタイミングを検知するには、window.onunloadイベントを利用します。

ここでは例として、グローバルなストレージオブジェクトとして「MyStorage」が存在するものとします。次のようにイベントハンドラを記述できます。

window.onunload = () => {  // ローカルストレージをクリア  window.MyStorage.clear()}

このコードにより、タブまたはウィンドウが閉じられた時点でローカルストレージのデータがクリアされます。

より確実な代替手段：sessionStorage

「タブを閉じたらデータを消したい」という要件だけであれば、最初からsessionStorageを使うのが最もシンプルで確実です。sessionStorageに保存したデータは、タブやウィンドウを閉じると自動的に削除されるためです。

// データの保存sessionStorage.setItem('key', 'value');// データの取得const value = sessionStorage.getItem('key');// データの削除sessionStorage.removeItem('key');

localStorageとの主な違いは保存期間のみなので、APIの使い方はほぼ同じ感覚で扱えます。

実装時の注意点

unloadイベントは、ブラウザのクラッシュやモバイル環境のアプリ終了など、すべての状況で必ず発火するとは限りません。また、ページの再読み込みでも発火してしまうため、「リロードではデータを残したい」場合には工夫が必要です。

そのため、セッション単位でデータを管理したい場合は、unloadイベントに頼るよりもsessionStorageの活用を検討するのがおすすめです。