3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Web】Cookie、セッション、キャッシュとは

Last updated at Posted at 2024-10-28

どれもサイトを閲覧したときの情報を保存するものですが、仕組みやデータの内容が異なります。

Cookie
セッション
キャッシュ

Cookie「誰が」

Cookie(クッキー)は、Webサーバーがユーザーのブラウザに保存させる小さなデータのことです。

形式:テキストファイル(.txt)
保存先:ユーザーのPC
役割:ユーザーの識別や設定の保持

  • ユーザーの識別:「ユーザーのID」や「ログイン情報」を保持するために使われます
  • ユーザー設定の保持:ユーザーが選択した言語やテーマ(ダークモードなど)の設定を保存し、次回アクセス時にも反映します
  • トラッキング:Webサイトの閲覧状況や行動を記録して、ユーザーの興味や行動を分析するために利用されます。これにより、パーソナライズされた広告やコンテンツが表示されるようになります

仕組み

①ユーザーが初めてWebサイトにアクセスすると、サーバーがCookieを生成します。サーバーはこのCookieをレスポンスの一部としてユーザーのブラウザに送信します。
画像1.png

②ユーザーのブラウザは送信されたCookieを保存します。
画像2.png

③ユーザーが次回以降、同じWebサイトにアクセスすると、ブラウザは保存していたCookieをリクエストに含めてサーバーに送信します。サーバーはその情報を基に、ユーザーを識別したり、前回の状態を引き継いだりします。
画像3.png

個人情報などは入力されていないものを残すことはできません。
誤解されがちですが、サーバーがユーザーの個人情報を保持しているのではなく、ユーザーのハードディスク内にある情報を読み取っているだけなのです。

セッション「何をしたか」

「セッション」は、Webサイトにアクセスしている間の「一連の流れ」や「やり取り」を一時的に保存しておく仕組みです。

形式:プログラムのデータ形式(文字、数値、配列…)のまま保存される
保存先:サーバー
役割:サーバー内に情報を保存し、ページ移動や操作をしても一貫して情報を維持する

  • ログイン状態の管理:ユーザーがページを移動しても、ログイン状態を保持します
  • 一時的な情報の保持:ショッピングカートの内容やフォーム入力中のデータなど、セッション内で一時的なデータを管理し、必要な間だけ保持します

仕組み

①ユーザーがサイトにアクセスしサーバーにリクエストが送信されると、サーバーはユーザーを識別するための一時的なID(セッションID)を生成します。そしてユーザーのブラウザに「Cookie」という形で送ります。
サーバーはセッションIDをキーとして、ユーザーのログイン状態、カートの中身などの情報をサーバー上のメモリやデータベースに保存します。
画像5.png

②ユーザーがサイト内でページを移動するたびに、ブラウザは保存したセッションIDをリクエストと一緒に送信します。サーバーはセッションIDを確認して「このIDはさっきアクセスした人だ」と判断し、情報をスムーズに引き継いで表示します。
画像6.png

③ユーザーがブラウザを閉じる、または一定時間何も操作しないなどで「セッション」が終了すると、サーバー上のセッションIDは無効化されます。再度アクセスした際には、新しいセッションIDが生成されます。
画像7.png

セッションの保存方法

サーバーサイドセッション
セッション情報がすべてサーバー側で管理される方式です。

クライアントサイドセッション
セッション情報がユーザー側(クライアント)で管理される方式です。

※後日追記予定

セッションとCookieの違い

セッションはそのときだけの一時的な情報を管理し、アクセスが終わると消えます。
一方、Cookieはある程度長い期間保存されることが多いです。

セッション Cookie
保存場所 サーバー側 クライアント側
(ユーザーのブラウザ)
用途 ログイン状態や一時的なデータ管理 設定保持やユーザーの利便性向上
有効期限 通常はブラウザを閉じると終了 設定した期限まで有効
セキュリティ 比較的高い 管理が必要
暗号化やSecure設定が推奨
情報のサイズ 大量のデータも管理可能 1つ約4KBまで
最低限の情報のみ保存

キャッシュ「ページの情報」

キャッシュとは、データを一時的に保存しておき、再度同じデータが必要になったときに素早く取り出せるようにする仕組みです。

ブラウザキャッシュ

形式:画像やCSS、JavaScriptなどのWebページを構成する要素
保存先:ユーザーのPC
役割:Webページで使われる画像やスタイルシートなどを一時保存し、次回同じサイトにアクセスした際に再読み込みを省略します

  • ブラウザバック:ブラウザの戻るボタンを押すと前のページに遷移します

サーバーキャッシュ

保存先:サーバー
役割:サーバー側でデータベースから取り出した情報を一時的に保存し、次回同じリクエストがあったときにデータベースを再度呼び出さなくてもデータを返せるようにします

※後日追記予定

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?