ローカル保存とは？キャッシュ・Cookie・ローカルストレージの違いをやさしく解説

スマホでWebサイトを見ていると、気づかないうちにいろいろなデータが端末の中に保存されています。

たとえば、画像の読み込みを速くするためのデータ。ログイン状態を保つためのデータ。Webアプリの設定を覚えておくためのデータ。

これらをまとめて、ざっくり言うとローカル保存です。

僕自身、PWA LABやOJ-PassのようなWebツールを作っていると、このローカル保存には何度も助けられます。オフラインでも動かしたい。毎回設定をリセットしたくない。そういう時に、ブラウザ側の保存機能はかなり便利です。

ただ、その一方で、キャッシュが残りすぎて「なんで古い表示のままなん？」となることもあります。特にSafariまわりは、開発しているとまあまあ悩まされます。

この記事では、キャッシュ・Cookie・ローカルストレージの違いを、できるだけスマホ目線でやさしく整理します。

ローカル保存とは、スマホの中に一時的に置かれるWebデータのこと

ローカル保存とは、WebサイトやWebアプリが、スマホやパソコンのブラウザ内にデータを保存する仕組みです。

ローカルという言葉が少し難しく見えますが、要するにあなたの端末側に保存されるデータという意味です。

Webサイトを毎回まっさらな状態で開くと、画像も設定もログイン状態も、すべて最初から読み込み直す必要があります。それだと遅いし、使いにくい。

そこでブラウザは、よく使うデータを端末内に一時保存します。

• キャッシュ：画像、CSS、JavaScript、ページの一部などを保存する
• Cookie：ログイン状態やサイト側が必要とする小さな情報を保存する
• ローカルストレージ：Webアプリの設定や状態を保存する

この3つは似ていますが、役割はかなり違います。

キャッシュは「表示を速くするためのコピー」

キャッシュは、Webページを速く表示するためのコピーです。

たとえば、一度見たページの画像やCSSをスマホの中に残しておけば、次に同じページを開いたときに読み込みが速くなります。

SNS、ニュースサイト、画像の多いページをよく見る人ほど、キャッシュはどんどん増えていきます。数百MB、場合によっては数GBになることもあります。

スマホの容量が少ないときに、まず疑うべきなのはこのキャッシュです。

キャッシュは基本的に消しても大きな問題は起きにくいデータです。消した直後だけ、ページの初回読み込みが少し遅くなることはありますが、必要なデータはまた読み込まれます。

ただし、開発者目線で言うと、キャッシュは便利な反面かなり厄介です。ページを更新したのに古いCSSが残る。アイコンを変えたのに反映されない。PWAでService Workerを使っていると、さらにキャッシュの影響が強く出ることもあります。

このあたりは、ブラウザキャッシュの仕組みでも詳しく書いています。

Cookieは「ログインや識別のための小さなメモ」

Cookieは、サイトがブラウザに保存する小さなメモのようなものです。

代表的なのはログイン状態です。

一度ログインしたサイトを、次の日に開いてもログイン状態が残っていることがあります。これはCookieが使われている場合が多いです。

Cookieには、次のような情報が保存されることがあります。

• ログイン状態
• サイトの表示設定
• ショッピングカートの情報
• アクセス解析や広告に使われる識別情報

キャッシュと違って、Cookieはむやみに消すと少し面倒です。

消すと、ログインしていたサイトからログアウトされたり、ショッピングカートの中身が消えたり、サイト設定が初期化されたりすることがあります。

なので、容量対策だけが目的なら、まずはキャッシュ削除を優先した方が安全です。

最近よく見る「Cookieを許可しますか？」という表示については、なぜ最近Cookie同意バナーが増えたのかでも解説しています。

ローカルストレージは「Webアプリの設定置き場」

ローカルストレージは、Webアプリがブラウザ内にデータを保存するための仕組みです。

Cookieよりもアプリ寄りの保存場所、と考えるとわかりやすいです。

たとえば、次のような用途で使われます。

• ダークモード設定を覚える
• 入力途中の内容を一時保存する
• 一度選んだ表示設定を保持する
• Webツールの状態を保存する

僕が作っているような小さなWebツールでも、ローカルストレージ的な考え方はかなり重要です。アプリストアから入れるアプリではなく、Webページをホーム画面に置いて使う場合、ブラウザ内の保存機能があることで「ただのページ」から「道具」に近づきます。

ただし、ローカルストレージを消すと、そのWebアプリ内の設定や状態が消えることがあります。

ログイン情報とは違いますが、サービスによっては「保存していた内容が消えた」と感じる場合もあります。

消していいもの、注意して消すもの

かなりざっくり整理すると、次のようになります。

• キャッシュ：基本的に消してOK。容量対策に向いている
• Cookie：ログアウトされることがあるので注意
• ローカルストレージ：Webアプリの設定や状態が消えることがある

スマホが重い、ブラウザの動きが悪い、容量が足りない。そういう時は、まずキャッシュから整理するのが一番無難です。

逆に、何でもかんでも一括削除すると、よく使うサイトからログアウトされて、あとで面倒になることがあります。

特にパスワードを覚えていないサービスがある場合は、Cookie削除には少し注意した方がいいです。

ローカル保存は危険なのか？

ローカル保存と聞くと、なんとなく危険そうに感じる人もいるかもしれません。

でも、ローカル保存そのものが危険というわけではありません。

むしろ、ほとんどのWebサイトやWebアプリで使われている標準的な仕組みです。

ローカル保存があるから、ページ表示は速くなります。ログイン状態も保てます。Webアプリも使いやすくなります。

問題になるのは、仕組みそのものではなく、何が保存されているかを知らないまま、全部同じものとして扱ってしまうことです。

キャッシュは消してもだいたい大丈夫。Cookieはログインに関係することがある。ローカルストレージはアプリの設定に関係することがある。

この違いだけ覚えておけば、かなり判断しやすくなります。

PWAやWebアプリでは、ローカル保存の重要度が上がる

最近は、Webサイトをホーム画面に追加して、アプリのように使うケースも増えています。

PWAやWebClipのような仕組みでは、キャッシュやローカル保存が体験にかなり影響します。

たとえば、オフラインでも動くWebアプリを作る場合、Service WorkerやCache APIを使って必要なファイルを保存します。OJ-Passのように「保存しない」「送信しない」「ブラウザ内で完結する」方向のツールでは、ローカル側の扱いが特に大事になります。

つまり、ローカル保存は単なる容量の話だけではありません。

Webをアプリのように使う時代になるほど、ローカル保存は使い心地を支える裏側の仕組みになっていきます。

PWAのキャッシュ戦略については、PWAのキャッシュ戦略を完全に理解するでも詳しく整理しています。

まとめ：まず消すならキャッシュ。Cookieは少し慎重に

ローカル保存は、WebサイトやWebアプリを快適に使うための仕組みです。

ただし、キャッシュ、Cookie、ローカルストレージは同じものではありません。

• キャッシュ：表示を速くするためのコピー。容量対策ならまずこれを削除
• Cookie：ログイン状態やサイト設定のメモ。消すとログアウトされることがある
• ローカルストレージ：Webアプリの設定や状態を保存する場所。消すと初期化される場合がある

スマホが重いとき、容量が少ないときは、まずキャッシュを整理する。

Cookieやローカルストレージは、ログインやアプリの設定に関わることがあるので、必要なときだけ消す。

このくらいの感覚で十分です。

ローカル保存は、怖いものではありません。むしろ、Webを便利に使うための土台です。ただ、違いを知らずに全部まとめて消すと、少し困ることがある。そこだけ覚えておけば大丈夫です。

このくらいの感覚で十分です。

ローカル保存は、怖いものではありません。むしろ、Webを便利に使うための土台です。ただ、違いを知らずに全部まとめて消すと、少し困ることがある。そこだけ覚えておけば大丈夫です。

“