

## 目次

1. [はじめに](#はじめに)  
2. [ブラウザストレージの基本3種とは？](#ブラウザストレージの基本3種とは)  
   - [クッキー（Cookie）](#クッキーcookie)  
   - [ローカルストレージ（LocalStorage）](#ローカルストレージlocalstorage)  
   - [セッションストレージ（SessionStorage）](#セッションストレージsessionstorage)  
3. [各ストレージの特徴比較表](#各ストレージの特徴比較表)  
4. [具体的なユースケースでの使い分け](#具体的なユースケースでの使い分け)  
5. [セキュリティリスクとその対策](#セキュリティリスクとその対策)  
6. [まとめ](#まとめ)

---

## はじめに

Webアプリケーションを開発する際、クライアント側にデータを保存して状態を保持することは非常に重要です。  
"ログイン状態を維持したい"、"入力フォームの一時保存をしたい"、"ユーザーの設定を覚えさせたい"──そんな場面で登場するのが、ブラウザのストレージ機能です。

本記事では、以下の3つのストレージについて徹底的に比較し、使い分けの判断基準を明確にします。

- Cookie（クッキー）
- LocalStorage（ローカルストレージ）
- SessionStorage（セッションストレージ）

---

## ブラウザストレージの基本3種とは？

### クッキー（Cookie）

- **送受信**：HTTPリクエストに自動的に付与され、サーバーに送信される  
- **容量**：最大約4KB程度（ブラウザ依存）  
- **有効期限**：指定可能。設定しなければセッションクッキー（ブラウザを閉じるまで有効）  
- **用途例**：ログインセッション、トラッキング、ABテスト、CSRF対策

![img](/mosaic-code.jpg)

---

### ローカルストレージ（LocalStorage）

- **送受信**：クライアントサイドのみ。HTTP通信に含まれない  
- **容量**：約5〜10MB（ブラウザ依存）  
- **有効期限**：永続的（ユーザーが削除しない限り残る）  
- **用途例**：ダッシュボードの状態保持、テーマ設定、アプリ内履歴など

![img](/mosaic-code.jpg)

---

### セッションストレージ（SessionStorage）

- **送受信**：クライアントサイドのみ。タブ単位で管理され、HTTP通信には含まれない  
- **容量**：約5MB  
- **有効期限**：ブラウザタブを閉じるまで  
- **用途例**：フォーム入力の一時保存、SPAのステート管理など

![img](/mosaic-code.jpg)

---

## 各ストレージの特徴比較表

| 項目             | Cookie          | LocalStorage      | SessionStorage     |
|------------------|------------------|--------------------|---------------------|
| 容量             | 約4KB            | 約5〜10MB           | 約5MB               |
| 有効期限         | 任意に設定可能     | 永続（明示的削除が必要） | タブを閉じるまで     |
| 自動送信         | 毎回HTTPに付与     | なし               | なし                 |
| スコープ         | ドメイン＋パス     | ドメイン           | タブ単位             |
| 使用用途         | 認証、トラッキング | 設定保存など        | 一時保存、状態管理     |
| JSアクセス        | 可（HttpOnly除く）| 可                | 可                  |

---

## 具体的なユースケースでの使い分け

### ログインセッション管理
- **Cookie**を使用。HttpOnlyとSecure属性を利用してセキュアに。

### ユーザー設定の保存
- **LocalStorage**が最適。ダークモードや言語設定など。

### フォームの一時保存
- **SessionStorage**が便利。複数ページにまたがるフォームなどに。

### トラッキングや分析
- **Cookie**。第三者Cookieや広告タグに利用される。

---

## セキュリティリスクとその対策

### CookieのXSS対策
- HttpOnly属性でJSからのアクセスをブロック  
- Secure属性でHTTPS通信に限定  
- SameSite属性でCSRF対策

### LocalStorageの脆弱性
- JSから直接アクセスできるため、XSSの影響大
- 機密データ（トークン等）は絶対に保存しない

### SessionStorageの注意点
- タブをまたげない特性に注意
- 状態共有が必要ならBroadcastChannel API等を併用

---

## まとめ

| 条件                            | 推奨ストレージ               |
|--------------------------------|-----------------------------|
| サーバーとセッションを共有したい | Cookie（HttpOnly推奨）       |
| ユーザー設定などを保存したい     | LocalStorage                 |
| タブごとの状態を一時的に保持したい | SessionStorage               |

ブラウザストレージを正しく使い分けることは、ユーザー体験の向上とアプリのセキュリティ強化に直結します。設計時には用途・スコープ・リスクをよく考慮して選択しましょう。


[cv:issue_marketplace_engineer]





## 目次

1. [はじめに](#はじめに)  
2. [ブラウザストレージの基本3種とは？](#ブラウザストレージの基本3種とは)  
   - [クッキー（Cookie）](#クッキーcookie)  
   - [ローカルストレージ（LocalStorage）](#ローカルストレージlocalstorage)  
   - [セッションストレージ（SessionStorage）](#セッションストレージsessionstorage)  
3. [各ストレージの特徴比較表](#各ストレージの特徴比較表)  
4. [具体的なユースケースでの使い分け](#具体的なユースケースでの使い分け)  
5. [セキュリティリスクとその対策](#セキュリティリスクとその対策)  
6. [まとめ](#まとめ)

---

## はじめに

Webアプリケーションを開発する際、クライアント側にデータを保存して状態を保持することは非常に重要です。  
"ログイン状態を維持したい"、"入力フォームの一時保存をしたい"、"ユーザーの設定を覚えさせたい"──そんな場面で登場するのが、ブラウザのストレージ機能です。

本記事では、以下の3つのストレージについて徹底的に比較し、使い分けの判断基準を明確にします。

- Cookie（クッキー）
- LocalStorage（ローカルストレージ）
- SessionStorage（セッションストレージ）

---

## ブラウザストレージの基本3種とは？

### クッキー（Cookie）

- **送受信**：HTTPリクエストに自動的に付与され、サーバーに送信される  
- **容量**：最大約4KB程度（ブラウザ依存）  
- **有効期限**：指定可能。設定しなければセッションクッキー（ブラウザを閉じるまで有効）  
- **用途例**：ログインセッション、トラッキング、ABテスト、CSRF対策

```javascript
document.cookie = "user_id=12345; path=/; max-age=3600";
```

---

### ローカルストレージ（LocalStorage）

- **送受信**：クライアントサイドのみ。HTTP通信に含まれない  
- **容量**：約5〜10MB（ブラウザ依存）  
- **有効期限**：永続的（ユーザーが削除しない限り残る）  
- **用途例**：ダッシュボードの状態保持、テーマ設定、アプリ内履歴など

```javascript
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
```

---

### セッションストレージ（SessionStorage）

- **送受信**：クライアントサイドのみ。タブ単位で管理され、HTTP通信には含まれない  
- **容量**：約5MB  
- **有効期限**：ブラウザタブを閉じるまで  
- **用途例**：フォーム入力の一時保存、SPAのステート管理など

```javascript
sessionStorage.setItem("step", "2");
const step = sessionStorage.getItem("step");
```

---

## 各ストレージの特徴比較表

| 項目             | Cookie          | LocalStorage      | SessionStorage     |
|------------------|------------------|--------------------|---------------------|
| 容量             | 約4KB            | 約5〜10MB           | 約5MB               |
| 有効期限         | 任意に設定可能     | 永続（明示的削除が必要） | タブを閉じるまで     |
| 自動送信         | 毎回HTTPに付与     | なし               | なし                 |
| スコープ         | ドメイン＋パス     | ドメイン           | タブ単位             |
| 使用用途         | 認証、トラッキング | 設定保存など        | 一時保存、状態管理     |
| JSアクセス        | 可（HttpOnly除く）| 可                | 可                  |

---

## 具体的なユースケースでの使い分け

### ログインセッション管理
- **Cookie**を使用。HttpOnlyとSecure属性を利用してセキュアに。

### ユーザー設定の保存
- **LocalStorage**が最適。ダークモードや言語設定など。

### フォームの一時保存
- **SessionStorage**が便利。複数ページにまたがるフォームなどに。

### トラッキングや分析
- **Cookie**。第三者Cookieや広告タグに利用される。

---

## セキュリティリスクとその対策

### CookieのXSS対策
- HttpOnly属性でJSからのアクセスをブロック  
- Secure属性でHTTPS通信に限定  
- SameSite属性でCSRF対策

### LocalStorageの脆弱性
- JSから直接アクセスできるため、XSSの影響大
- 機密データ（トークン等）は絶対に保存しない

### SessionStorageの注意点
- タブをまたげない特性に注意
- 状態共有が必要ならBroadcastChannel API等を併用

---

## まとめ

| 条件                            | 推奨ストレージ               |
|--------------------------------|-----------------------------|
| サーバーとセッションを共有したい | Cookie（HttpOnly推奨）       |
| ユーザー設定などを保存したい     | LocalStorage                 |
| タブごとの状態を一時的に保持したい | SessionStorage               |

ブラウザストレージを正しく使い分けることは、ユーザー体験の向上とアプリのセキュリティ強化に直結します。設計時には用途・スコープ・リスクをよく考慮して選択しましょう。






目次

続きを読むには単価診断を受けてください（30秒）