Cookie、ローカル ストレージ、セッション ストレージ

これは、フロントエンドのインタビューの質問シリーズの投稿 #6 です。準備をレベルアップしたい場合、または常に最新情報を入手したい場合は、Frontend Camp へのサインアップを検討してください。

---

Cookie、ローカル ストレージ、およびセッション ストレージはすべて、クライアント側でデータを保存するために使用されます。これらのメカニズムは、認証トークンや、テーマや個人設定などのクライアントのみの状態を保存する場合に特に役立ちます。 3 つのストレージ タイプはすべて、次の特性を共有しています:

1. データはキーと値のペアとして保存されます。
2. すべての値は文字列形式で保存されます。値が文字列でない場合は、保存される前にシリアル化されます。
3. これらのメカニズムに保存されたデータは、クライアントからアクセスできます (HttpOnly Cookie を除く)。

クッキー

Cookie は大量のデータを保存できません。ストレージの上限はドメインごとに約 4KB です。この制限が存在するのは、ブラウザによってリクエストが行われるたびに Cookie が自動的にサーバーに送信されるためです。過剰なクライアント側データを Cookie に保存すると、ペイロード サイズが増加し、パフォーマンスに悪影響を及ぼします。

Cookie にはどのようなデータを保存する必要がありますか?
Cookie は、認証トークン、セッション ID、分析 ID、および同様の情報など、サーバーに送信する必要があるデータを保存するのに最適です。さらに、Cookie を使用すると、同じドメインまたはサブドメインの異なるタブまたはウィンドウ間でデータを共有できます。

さまざまなフラグを使用して Cookie を構成し、動作を調整したり、セキュリティを強化したりできます。

• HttpOnly は、クライアント側の JavaScript 経由で Cookie にアクセスできないようにし、XSS 攻撃のリスクを軽減します。
• maxAge/expires は、Cookie の有効期限を指定します。有効期限が設定されていない場合、Cookie はブラウザを閉じると削除されます。

Cookie フラグについて詳しく知りたいですか?私の LinkedIn 投稿をチェックしてください。

ローカル ストレージやセッション ストレージとは異なり、Cookie は Set-Cookie ヘッダーを使用してサーバーによって設定 (「追加」と読みます) することもできます。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

ローカルストレージ

Cookie とは異なり、localStorage はドメインごとに約 5MB という大幅に大きなストレージ容量を提供します。これは、localStorage が長期データを保存するように設計されているためです。ブラウザが閉じているときでもデータが保持されるため、クライアント側の永続的なストレージのニーズに最適です。

では、localStorage にはどのようなデータを保存すればよいでしょうか?
localStorage は、クライアント側でのみ使用され、リクエストごとにサーバーに送信する必要のないデータの保存に最適です。例としては、Web サイトのテーマや、ユーザーがサインインする前にカートに追加された製品などがあります。

localStorage に保存されたデータは、ユーザーが手動で削除するか、Web サイトが JavaScript を使用してデータを消去するまで無期限に保持されます。

Cookie と同様に、localStorage 内のデータは、同じ生成元のすべてのタブまたはウィンドウからアクセスできるため、ドメイン内のクライアント側の状態を共有するのに役立ちます。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

セッションストレージ

sessionStorage は、有効期間の短いクライアント側データを保存するために使用されます。 localStorage と同様に、ドメインごとに約 5MB のストレージ容量を提供し、同じ API を共有します。

sessionStorage と localStorage はどちらも同様の機能を共有していますが、データ永続性 と アクセシビリティという 2 つの重要な側面が異なります。
localStorage とは異なり、sessionStorage はタブまたはブラウザを閉じるとデータを保持しません。さらに、sessionStorage に保存されたデータは、そのデータが作成された特定のタブまたはウィンドウに分離されます。つまり、同じオリジンの他のタブまたはウィンドウはアクセスできません。

sessionStorage の使用例は何ですか?
sessionStorage は、単一セッションにのみ必要なデータを保存するのに最適です。たとえば、ユーザーが長いフォームに入力し、誤ってページを更新したとします。フォーム データが sessionStorage に保存されている場合、それは更新中も保持されるため、ユーザーは進行状況を失うことなく続行できます。

ただし、このデータは別のタブからアクセスしたり、タブを閉じるとアクセスできなくなることに注意してください。

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

Cookie はブラウザーによって送信されるすべてのリクエストに自動的に含まれますが、localStorage または sessionStorage に保存されているデータは、カスタム コードを記述することでサーバーに手動で送信できます。

---

まとめ

1. Cookie、localStorage、sessionStorage は、クライアント側にデータを保存するために使用されます。
2. Cookie は、Set-Cookie 応答ヘッダーを使用してサーバーによって設定できる唯一のストレージ形式です。
3. Cookie はリクエストごとに自動的にサーバーに送信されます。
4. localStorage と sessionStorage は、Cookie (4KB) に比べて非常に大きなストレージ (5MB) を持っています。これらのストレージはどちらも同じ API インターフェイスを共有します。
5. Cookie には有効期限があり、有効期限がない場合はブラウザを閉じると消去されます。
6. localStorage データは、ユーザーまたは Web サイト自体が手動で消去しない限り、無期限に存続します。
7. sessionStorage データは、セッションの終了後、つまりタブまたはウィンドウが閉じられたときにクリアされます。

---

今読んだ内容は気に入りましたか?フロントエンド キャンプをチェックしてみてください ✌️

以上がCookie、ローカル ストレージ、セッション ストレージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。