localstorage sessionstorage 違いを徹底解説！中学生でも分かる使い分けガイド

---

localStorageとsessionStorageの違いを徹底解説！中学生でも分かる使い分けガイド

localStorageとsessionStorageは、どちらもブラウザの中にデータを保存する仕組みです。これらを使うと、ウェブサイトを開いたままにしておくときに、ユーザーの情報をすぐに取り出せるようになりますが、実は保存の仕方や使い方には大きな違いがあります。
まず覚えておきたいのは、データはすべて文字列として保存されるという点です。例えば数値や真偽値を保存したいときは、文字列として保存してから必要に応じてパースする必要があります。
また、localStorageは同じ origin 内のすべてのページやタブで共有されます。つまり、同じサイトの別のページを開いても、同じデータを参照できるということです。これに対してsessionStorageは各タブごとに分かれているため、同じサイトの別のタブを開いた場合はデータを共有しません。
この性質のおかげで、localStorageは長く保存しておきたい設定や履歴、ログイン状態のような情報に向いていますが、sessionStorageは現在の作業セッションだけ必要な情報（例えば現在の作業状態や未送信の入力データ）に適しています。

仕組みと違いの基本

ここでは、基本の仕組みをもう少し詳しく見ていきます。localStorageは同じ origin のすべてのタブ・ウィンドウでデータが共有され、ページを切り替えても persistsします。対して sessionStorage は新しいタブを開くとデータがリセットされ、現在のタブのセッションだけで使えます。
この違いを理解することが、使い分けの第一歩です。データがどれくらいの期間、どこに保存されるのかを知っておくと、セキュリティ面でも安心して使えます。

実例と使い分けのポイント

実際の使い分けとしては、個人設定や履歴のように長く残したい情報は localStorage、現在の作業中の入力データや一時的な選択肢の状態は sessionStorage に保存するのが基本です。
例として、サイトのカラーテーマ設定を localStorage に保存しておけば、次回訪問時にも同じテーマが適用されます。
一方、フォームの途中まで入力した内容は sessionStorage に保存しておくと、誤ってページを離れても作業を再開できます。コードのイメージは以下のとおりです。
localStorage.setItem('theme','dark');
const theme = localStorage.getItem('theme');
// sessionStorage の例
sessionStorage.setItem('draft','ここまで入力した文');
const draft = sessionStorage.getItem('draft');

able>比較項目localStoragesessionStorage保存場所ブラウザのローカル領域タブごとに分離持続性永続的に保存セッションが終わると削除データ型すべて文字列として保存すべて文字列として保存データの共有範囲同 origin の全タブで共有同じタブ内でのみ共有容量の目安比較的多く保存可能同等の容量だがセッション依存ble>

ピックアップ解説

ねえ、localStorageっていうのは、ブラウザの中に自分だけの小さなノートを作るみたいな機能だよ。名前をつけてデータを保存すると、次に同じサイトを開いたときにもその値が使える。だけどノートは「長期保存」に向く一方で、間違って他の人が見たり、別のデバイスからは見えない。使い方を間違えないよう、文字列として保存される点と、同じ origin でのみ共有される点を覚えておくといいね。

---