はじめに

をまとめてみる初心者向けの記事です。

ローカルとは

「ローカル」とは、自分のパソコンやスマホなどの端末の中のことを指します。

つまり、「ローカルに保存」とは、自分の端末の中にデータを保存するという意味です。

「ブラウザ」は、Chrome、Safari、Edge などのWebページを表示するアプリを指します。

「ブラウザ」は、ページを快適に表示するために、一部のデータを自分の端末内に保存する仕組みを持っており、これを「ブラウザに保存」と呼んでいます。

具体的には次のようなデータが保存されます。

一度表示したWebページのデータをブラウザが自動で保存しておく仕組み

対象：HTML / CSS / JS / 画像などの表示データ
目的：Webページの表示の高速化のため
保存場所：ブラウザのローカル領域（端末のディスクやメモリ）
- 例：~/Library/Caches/Google/Chrome/Default/Cache（Chromeの場合）

キャッシュの詳細については、こちらの記事もご覧ください。

Webサイトがユーザー識別や状態を保持するために保存を指示する小さなデータ

LocalStorage と SessionStorage は、どちらも「Web Storage API」という同じ仕組みで提供されるブラウザ内の保存領域

項目	LocalStorage	SessionStorage
保存期間	永続（削除しない限り残る）	タブを閉じると消える
共有範囲	同一ドメイン内で共有	同じタブ内だけ有効

仕組み	主な目的	保存されるきっかけ	消えるタイミング
キャッシュ	表示の高速化	ブラウザが自動で保存	期限切れ・更新時
Cookie	ログイン状態・ユーザー識別	サーバーやJSが設定	有効期限まで
LocalStorage	長期的な状態保持	JSが保存	手動で削除するまで
SessionStorage	一時的な状態保持	JSが保存	タブを閉じたら削除