結論から
sessionStorage は、ブラウザが提供する Web Storage API のひとつで、同じオリジンのページから 文字列のキーと値 を読み書きするための領域です。window.sessionStorage から利用します。
名前のとおり 「セッション」に近い寿命 を持ち、タブを閉じると消える（永続ストレージではない）点が、localStorage との大きな違いです。
何ができるか
- キーと値はどちらも文字列。オブジェクトを入れるときは
JSON.stringify/JSON.parseが必要になることが多いです。 - 読み書きは
getItem/setItem/removeItem/clearなどで行います。 - 容量はブラウザ依存で、目安として数 MB 程度と考えることが多いです（環境・実装で変わります）。
書き込みと読み出しの最小構成
同じページの <script> や ES モジュールから、window は省略してよいです。
// 書き込み（キーと値はどちらも文字列）
sessionStorage.setItem('userTheme', 'dark');
// 読み出し（該当キーが無いときは null）
const theme = sessionStorage.getItem('userTheme');
// 1 キーだけ削除
sessionStorage.removeItem('userTheme');
// このタブの sessionStorage をすべて空にする
sessionStorage.clear();getItem が null のときは未保存か削除済みなので、既定値を足すなら次のようにします。
const theme = sessionStorage.getItem('userTheme') ?? 'light';タブ単位で別になる
一般に sessionStorage は「トップレベルの閲覧コンテキスト」（多くの場合はタブ）ごとに分かれたストレージとして扱われます。同じサイトを別タブで開いた場合、タブ同士では共有されないことが多い、と理解しておくと安全です。
同じタブ内であれば、ページ遷移やリロードがあっても、タブを閉じない限り 同じ sessionStorage にアクセスし続けられます。
いつ消えるか
- タブ（またはそのウィンドウ）を閉じたあと、データは原則として参照できなくなります。
- リロードでは消えません（同じタブのセッションの範囲内）。
「今日一度見たら今日は二度と出さない」より 「このタブを閉じるまで」 の単位でフラグを持ちたいときに向きます。
localStorage との違い（ざっくり）
| 観点 | sessionStorage | localStorage |
|---|---|---|
| 寿命のイメージ | タブを閉じるまで | 明示的に消すかユーザーが消すまで残ることが多い |
| タブ間 | 基本は別 | 同じオリジンなら別タブでも共有されることが多い |
どちらも クライアント側だけ の保存であり、秘密情報の保管場所には向きません（開発者ツールで見えるため）。
使いどころの例
初回だけローディングや案内を出す
「このタブで初回アクセス時だけフルスクリーンのローディングを出し、同じタブで再読み込みしたらスキップする」といった フラグ管理に使われることがあります。
const isFirstVisit = !sessionStorage.getItem('visited');
if (isFirstVisit) {
// 初回だけ表示する処理
sessionStorage.setItem('visited', '1');
}キー名や値の意味はプロジェクトで統一するとよいです。
マルチページで「もう見た URL」を覚える
複数の静的 HTML を行き来するサイトでは、そのタブのセッション中だけ「すでに抽選したページ」を sessionStorage に記録し、重複を避ける、というパターンもあります。コードの単位での実装は、下の 関連記事 を参照してください。
仕様の細部は公式を正とする
プライベートブラウジング、iframe 越しの扱い、ストレージ容量エラー、storage イベントとの関係などは、ブラウザやバージョンで差があり得ます。挙動の最終確認は MDN の Window.sessionStorage や仕様・各ブラウザのドキュメントを参照してください。
Q&A
sessionStorage に保存できるのは、必ずキーと値のセットなの？
はい。Web Storage の API 上、データを保存するときは setItem(キー, 値) の形で、第1引数がキー、第2引数が値の ペアが必須です。キーなしで値だけを積む、という呼び出し方はありません。
- 読み書きの基本は
getItem(キー)とsetItem(キー, 値)で、どちらも キーを起点にします。 - 複数の値を持ちたいときは キーを分けるか、1つのキーに
JSON.stringifyした文字列としてまとめて保存する、といった設計になります。
内部のイメージは 「文字列キー → 文字列値」のマップ（連想配列） に近いです。
「オブジェクトを入れるときは JSON.stringify / JSON.parse が必要になることが多い」とは、具体的にどういうこと？
sessionStorage（や localStorage）に保存できる「値」は、API 上すべて文字列です。JavaScript のオブジェクトや配列は、そのまま setItem の第2引数に渡してもオブジェクトとして保管されるわけではありません。多くの環境では、オブジェクトが文字列化される過程で "[object Object]" のような 中身の取り出し不能な文字列 になってしまいます。
そのため、保存前にオブジェクトを意味のある文字列に直す必要があります。よく使われるのが JSON.stringify で、たとえば { theme: 'dark', fontSize: 14 } を '{"theme":"dark","fontSize":14}' のような JSON 文字列にしてから setItem します。
const prefs = { theme: 'dark', fontSize: 14 };
sessionStorage.setItem('prefs', JSON.stringify(prefs));
// ストレージの値は '{"theme":"dark","fontSize":14}' のような JSON 文字列になる読み出し側では、getItem が返すのは 文字列か null だけなので、保存した JSON 文字列を JSON.parse して、またオブジェクトや配列として扱います（キーが無いときは null なので、getItem の結果を確認してから parse するのが安全です）。
const raw = sessionStorage.getItem('prefs');
if (raw !== null) {
const prefs = JSON.parse(raw);
// prefs はオブジェクトとして扱える
}「ことが多い」と書いているのは、JSON 以外の独自フォーマットでもよいが、構造を保ったまま往復したいなら JSON が代表的、という意味です。なお Date などは JSON だと文字列化されるので、復元後の型は都度設計するとよいです。
関連記事
- マルチページ静的サイトで「訪問済みを避けてランダム遷移」する JavaScript の組み方 — 訪問済みスラッグを
sessionStorageに JSON で保持し、未訪問優先でlocation.assignする実装例。
まとめ
sessionStorageは タブに近い単位で区切られた 一時的な文字列ストレージ。- 閉じると消えるイメージで
localStorageと使い分ける。 - 初回フラグや 同一セッション内の状態の保持に向くが、機密は置かない。