自作の道具のデータをブラウザに置いていて、「これはいつ消えるのか」を調べていたら、ブラウザの保存場所がいくつもあることを知りました。バックエンドばかりやってきたので、ほとんど意識したことがありませんでした。あとで見直せるよう、早見表にまとめておきます。
早見表
| 保存場所 | 形 | 容量の目安 | サーバーに送られるか | 閉じると | 主な使い道 |
|---|---|---|---|---|---|
| Cookie | 小さな文字 | 1 つ 4KB まで | アクセスのたびに自動で送られる | 期限まで残る（期限なしならブラウザを閉じると消える） | ログイン状態の維持 |
| localStorage | キーと文字列 | 5〜10MB | 送られない | 残る | 画面の設定、小さなデータ |
| sessionStorage | キーと文字列 | 5〜10MB | 送られない | タブを閉じると消える | そのタブだけの一時的な状態 |
| IndexedDB | ブラウザの中の DB | 大きい（ディスクの空きしだい） | 送られない | 残る | 構造のある大きなデータ |
| Cache Storage | ページのファイル（HTML・JS・画像）の写し。プログラムが管理する | 大きい | 送られない | 残る | PWA をネットなしで開く（サービスワーカーが使う） |
| OPFS | ブラウザの中のファイル置き場 | 大きい | 送られない | 残る | 大きなファイル、ブラウザの中で動かす SQLite |
| HTTP キャッシュ | ページのファイルの写し。ブラウザが自動で管理する（プログラムからは直接触れない） | ブラウザが決める | ― | 残る（古いものから消える） | 2 回目に開くときを速くする |
どれも Chrome・Edge・Firefox・Safari のすべてで使えます。容量の上限の決め方は、ブラウザごとに違います。
別枠：利用者のファイル（File System Access API）
これはブラウザの保存場所ではなく、利用者の PC のファイルを、許可をもらって直接読み書きする仕組みです。ブラウザのデータを消しても、ファイルは消えません。使えるのは Chrome・Edge だけで、Firefox・Safari は安全面の理由から入れていません。
いつ消えるか
消える
| 場面 | 説明 |
|---|---|
| 閲覧データの削除 | 「Cookie と他のサイトデータ」を選ぶと、Cookie・localStorage・sessionStorage・IndexedDB・Cache Storage・OPFS がまとめて消える。「キャッシュされた画像とファイル」で消えるのは、主に HTTP キャッシュ |
| サイトごとの削除 | アドレスバーの左のアイコン → サイトの設定 →「データを削除」で、そのサイトの分だけ消える |
| 閉じるときに自動で削除する設定 | Chrome の「すべてのウィンドウを閉じるときにサイトデータを削除する」がオンのとき。Edge の「閉じるときに閲覧データをクリアする」は項目ごとに選べて、「Cookie およびその他のサイトデータ」がオンのとき |
| 掃除ソフト | ブラウザのデータを消すものがある |
| シークレットウィンドウ | シークレット（Edge では InPrivate）の中で保存したものは、シークレットのウィンドウをすべて閉じたときに消える |
| ディスクの空きが少ないとき | ブラウザが、しばらく使っていないサイトの分から自動で消すことがある（「なるべく残す」扱い。navigator.storage.persist() で「消さないで」と頼める） |
| Safari の追跡防止 | プログラムが書いたデータ（localStorage・IndexedDB など）は、7 日間そのサイトを開かないと消える。Chrome・Edge にはない |
| サイトのプログラムが消す | localStorage.clear() を呼ぶ、ログアウトのときにサーバーが「このサイトのデータを消して」と指示する（Clear-Site-Data）など |
| PC の買い替え・プロフィールの削除 | ブラウザの同期は、ブックマークやパスワードは引き継ぐが、これらの保存場所は引き継がない |
消えたように見える（実は残っている）
| 場面 | 説明 |
|---|---|
| アドレスが変わった | 保存場所は、アドレスの組み合わせ（http か https か、ドメイン、ポート）ごとに別の箱。http から https に移した、ドメインを変えた、などで新しい箱は空になる。古い箱には残っている |
| 別のブラウザ・プロフィールで開いた | ブラウザごと・プロフィールごとに別。Chrome で保存したものは Edge では見えない |
| シークレットで開いた | ふだんのウィンドウで保存したものは、シークレットからは見えない（空の状態から始まる） |
覚えておくこと
- 消すときは、ほぼまとめて消える。localStorage だけ残る、ということは基本的にない
- サイト（アドレス）ごとに別の箱。ほかのサイトの分は読めない
- 大きいもの（IndexedDB・Cache Storage・OPFS）は、サイトごとの容量の枠を分け合っている。ディスクの空きが少なくなると、サイトの分が丸ごと消されることがある
- 大事なデータは、ブラウザの外（ファイル）にも置く。ブラウザの保存場所は、どれもブラウザの都合で消える
自分の目で見る
- 見たいサイトを開いて F12 →「Application（アプリケーション）」→ 左の「Storage」に、Local storage・Session storage・IndexedDB・Cookies・Cache storage などが並んでいる
- 同じ画面の「Storage」の見出しを押すと、そのサイトが使っている容量と、まとめて消すボタン（Clear site data）がある
コンソールで localStorage の中身を一覧にするコードは、ブラウザの localStorage（ローカルストレージ）とはに書いています。
バックエンドの感覚でたとえると
| 保存場所 | たとえ |
|---|---|
| Cookie | リクエストのたびに、ヘッダーに必ず載る小さな値 |
| localStorage | 小さなキー・バリュー型のストア（Redis のごく簡単な版） |
| sessionStorage | 接続（タブ）が切れたら消える、一時的なキー・バリュー |
| IndexedDB | アプリに組み込んだ DB |
| OPFS | アプリ専用の作業用ディスク |
| Cache Storage | 中身を自分で決められる、リバースプロキシのキャッシュ |
| HTTP キャッシュ | 自動で効く、リバースプロキシのキャッシュ |
どれも「バックアップもレプリケーションもなく、利用者がいつでも消せる」置き場だと思っておくのが安全です。
