はじめに
- 「ブラウザに保存」「ローカルに保存」とよく言うが、何がどこに保存されているの？
- 「キャッシュ」「Cookie」「LocalStorage」の違いは何？
をまとめてみる初心者向けの記事です。
ローカルとは
「ローカル」とは、自分のパソコンやスマホなどの端末の中のことを指します。
つまり、「ローカルに保存」とは、自分の端末の中にデータを保存するという意味です。
ブラウザとは
「ブラウザ」は、Chrome、Safari、Edge などのWebページを表示するアプリを指します。
「ブラウザ」は、ページを快適に表示するために、一部のデータを自分の端末内に保存する仕組みを持っており、これを「ブラウザに保存」と呼んでいます。
具体的には次のようなデータが保存されます。
- リソースファイル（HTML・CSS・画像・JavaScriptなど）
- Webサイト側が設定したデータ
キャッシュとは
一度表示したWebページのデータをブラウザが自動で保存しておく仕組み
- 対象：HTML / CSS / JS / 画像などの表示データ
- 目的：Webページの表示の高速化のため
- 保存場所：ブラウザのローカル領域（端末のディスクやメモリ）
- 例：
~/Library/Caches/Google/Chrome/Default/Cache（Chromeの場合）
- 例：
キャッシュの詳細については、こちらの記事もご覧ください。
Cookieとは
Webサイトがユーザー識別や状態を保持するために保存を指示する小さなデータ
- 対象：ログイン情報・言語設定・アクセス解析用の識別子など
- 目的：ユーザーを識別したり、ログイン状態を維持するため
- 保存場所：ブラウザのローカル領域（テキスト形式で管理）
- サイトに再アクセスすると、自動的にサーバーへ送信される
LocalStorage / SessionStorageとは
LocalStorage と SessionStorage は、どちらも 「Web Storage API」という同じ仕組みで提供されるブラウザ内の保存領域
| 項目 | LocalStorage | SessionStorage |
|---|---|---|
| 保存期間 | 永続（削除しない限り残る） | タブを閉じると消える |
| 共有範囲 | 同一ドメイン内で共有 | 同じタブ内だけ有効 |
- 対象：Webアプリ内で使うデータ（ユーザー設定・入力内容・UI状態など）
- 目的：ブラウザ内だけでデータを保持し、再訪時やページ遷移時に状態を復元する
- 保存場所：ブラウザのローカル領域
- サーバーには送信されない
まとめ
| 仕組み | 主な目的 | 保存されるきっかけ | 消えるタイミング |
|---|---|---|---|
| キャッシュ | 表示の高速化 | ブラウザが自動で保存 | 期限切れ・更新時 |
| Cookie | ログイン状態・ユーザー識別 | サーバーやJSが設定 | 有効期限まで |
| LocalStorage | 長期的な状態保持 | JSが保存 | 手動で削除するまで |
| SessionStorage | 一時的な状態保持 | JSが保存 | タブを閉じたら削除 |