How Browsers Store Data

ブラウザは単にウェブサイトを表示するだけではありません。ローカルのデータマネージャーとしても機能します。ブラウジングをより速く、より簡単にするために、デバイス上に情報を保存します。

ブラウザがデータを保存する主な3つの方法を知っておく必要があります：

• Cookies • Browser Cache • Web Storage

Cookies Cookiesは小さなテキストファイルです。ウェブサイトは、ユーザーを識別するためにこれを使用します。ログインセッションや言語設定などを保存します。

仕組み：

  • サイトを訪問する。
  • サイトがブラウザにCookieを送信する。
  • ブラウザがそれを保存する。
  • 次回訪問時に、ブラウザがそのCookieをサーバーに送り返す。

注意点：

  • Cookiesには4KBという非常に小さな容量制限があります。
  • すべてのリクエストと一緒に送信されるため、動作が遅くなる可能性があります。
  • Cookiesにパスワードを保存しないでください。

Browser Cache Cacheは、画像、CSS、JavaScriptなどの重いファイルを保存します。その目的は高速化です。

仕組み：

  • 初めてサイトを訪問する。
  • ブラウザがすべてのファイルをダウンロードし、キャッシュに保存する。
  • 次回訪問時、ブラウザはインターネットからではなく、デバイスからファイルを読み込む。

メリット：

  • ページの読み込みが大幅に速くなる。
  • インターネットの帯域幅の消費を抑えられる。
  • サーバーへの負荷を軽減できる。

Web Storage これはHTML5の機能です。サイトがデータをキーと値のペアとして保存できるようにします。すべてのリクエストでサーバーに送信されないため、Cookiesよりも効率的です。

2つのタイプがあります：

  • Local Storage: ブラウザを閉じてもデータが保持されます。容量は約5MB〜10MBです。
  • Session Storage: タブを閉じるとデータが消えます。

ユースケース：

  • Local storageは、ダークモードの設定などに適しています。
  • Session storageは、一時的なフォームデータの保持に適しています。

Summary

  • ログインセッションやサーバーとの通信にはCookiesを使用する。
  • 静的アセットを使用してサイトの読み込みを高速化するにはCacheを使用する。
  • より大量のクライアントサイドのデータを扱うにはWeb Storageを使用する。

Source: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h