「キャッシュ」「Cookie」「LocalStorage」の違い #初心者 - Qiita

「キャッシュ」「Cookie」「LocalStorage」の違い #初心者 - Qiita 0 いいねしたユーザー一覧へ移動 0 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete @ suuuuetsugu 「キャッシュ」「Cookie」「LocalStorage」の違い 初心者 キャッシュ cookie localStorage sessionStorage 0 最終更新日 2025年10月12日 投稿日 2025年10月11日 はじめに 「ブラウザに保存」「ローカルに保存」とよく言うが、何がどこに保存されているの？ 「キャッシュ」「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が保存 タブを閉じたら削除 0 いいねしたユーザー一覧へ移動 0 comment 0 コメント一覧へ移動 新規登録して、もっと便利にQiitaを使ってみよう あなたにマッチした記事をお届けします 便利な情報をあとで効率的に読み返せます ダークテーマを利用できます ログインすると使える機能について 新規登録 ログイン 0 いいねしたユーザー一覧へ移動 0 more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete