【JavaScript】localStorageとsessionStorageの違いと使い分け

Webブラウザにはデータを保存するための仕組みがいくつか用意されています。その中でもlocalStorageとsessionStorageは手軽に利用できる保存先としてよく使われます。どちらもWeb Storage APIに含まれていますが、保存期間や用途が異なるため正しく理解して使い分けることが大切です。

localStorageとは

localStorageはブラウザに半永久的にデータを保存できる仕組みです。ユーザーがブラウザを閉じてもデータは残り続け、明示的に削除しない限り保持されます。ユーザー設定やテーマカラー、ログイン状態の維持などに向いています。

// データを保存
localStorage.setItem('theme', 'dark');

// データを取得
const theme = localStorage.getItem('theme');

// データを削除
localStorage.removeItem('theme');

// 全てのデータをクリア
localStorage.clear();

sessionStorageとは

sessionStorageはブラウザタブを閉じるまでデータを保持します。新しいタブやウィンドウを開いた場合は別のセッションとみなされ、データは共有されません。一時的な入力データや確認画面用の値など、ページ閲覧中だけ保持したい情報に適しています。

// データを保存
sessionStorage.setItem('draft', '入力中の内容');

// データを取得
const draft = sessionStorage.getItem('draft');

// データを削除
sessionStorage.removeItem('draft');

// 全てのデータをクリア
sessionStorage.clear();

違いのまとめ

使い分けの考え方

長期間保持すべきデータ（ユーザーの選択やアプリの状態）はlocalStorageに、一時的な処理で十分なデータ（確認画面やタブ間共有不要な一時保存）はsessionStorageに保存するのが基本です。ただしどちらも暗号化されていないため、機密情報やパスワードを保存するのは避けましょう。

まとめ

localStorageとsessionStorageは使い方がよく似ていますが、保存期間とスコープが大きな違いです。用途に合わせて適切に選択することで、快適で安全なWebアプリケーションを実装できます。