WebストレージとCookie
ブラウザ側のデータ保存とは
Webアプリでは、サーバーだけでなくブラウザ側にもデータを保存できます。ログイン状態の維持、設定の記憶、オフライン用のデータ保持などに使われ、主な手段は Cookie・Webストレージ(localStorage / sessionStorage)・IndexedDB の3つです。
3つの保存手段の比較
| Cookie | localStorage | IndexedDB | |
|---|---|---|---|
| 容量の目安 | 約4KB | 約5MB | 大容量(数百MB以上も可) |
| サーバーへ自動送信 | される(毎リクエスト) | されない | されない |
| 有効期限 | 設定可能 | 消すまで永続 | 消すまで永続 |
| 扱えるデータ | 文字列 | 文字列(JSONで工夫) | オブジェクト・バイナリ |
| 主な用途 | セッションID、認証 | 設定・小さなキャッシュ | オフラインデータ、大量データ |
最大の違いは、Cookie だけが [[HTTP]] リクエストのたびにサーバーへ自動送信されることです。サーバーが「この人は誰か」を知る必要がある認証・[[セッション管理]] には Cookie が使われ、ブラウザ内だけで完結するデータには Webストレージが向きます。
localStorageの基本
// 保存(文字列のみなのでJSONに変換)
localStorage.setItem('settings', JSON.stringify({ theme: 'dark' }));
// 取得
const settings = JSON.parse(localStorage.getItem('settings'));
// 削除
localStorage.removeItem('settings');
sessionStorage は API が同じで、タブを閉じると消える点だけが異なります。なお保存領域はオリジン(スキーム+ドメイン+ポート)単位で分離され、他サイトのデータは読めません。
セキュリティ上の注意
- localStorage は [[JavaScript]] から常に読めるため、XSS 攻撃が成立するとトークンごと盗まれます。認証トークンの置き場所としては、JSから読めない HttpOnly 属性付き Cookie が安全とされます([[Webセキュリティ]] 参照)
- Cookie には
Secure(HTTPS のみ送信)やSameSite(他サイトからの送信制限)属性を適切に設定します - 個人情報や秘密情報を平文でブラウザに保存しない、が大原則です
関連技術とのつながり
- [[セッション管理]] — Cookie を使ったログイン状態の維持の仕組み
- [[Webセキュリティ]] — XSS と保存場所の選択は直結する
- [[HTTP]] — Cookie はHTTPヘッダーで送受信される
- [[PWA]] — オフライン動作のデータ保持にストレージを活用する
- [[XSS(クロスサイトスクリプティング)]] — localStorage のトークンが盗まれる経路。HttpOnly Cookie が対策
Q: サーバーへ毎リクエスト自動送信されるのはどれ?
- [x] Cookie
- [ ] localStorage
- [ ] IndexedDB
解説: Cookieだけがリクエストのたびに自動送信されるため、サーバー側での認証・セッション管理に使われます。
Q: localStorageとsessionStorageの違いはどれ?
- [ ] localStorageは文字列以外も保存できる
- [x] sessionStorageはタブを閉じるとデータが消える
- [ ] sessionStorageはサーバーへ自動送信される
解説: APIは同じで、sessionStorageはタブを閉じると消え、localStorageは削除するまで残ります。
Q: 認証トークンの保存場所としてlocalStorageより安全とされるのはどれ?
- [ ] URLのクエリ文字列
- [ ] グローバル変数
- [x] HttpOnly属性付きCookie
解説: HttpOnly付きCookieはJavaScriptから読めないため、XSSが成立してもトークンを直接盗まれません。