結論
- localStorage - 長期保存したい非機密データ向け（ユーザー設定、テーマ、買い物かご）
- sessionStorage - タブ内だけで一時的に必要なデータ向け（フォームの途中入力、ページ状態）
- Cookie - サーバーとやり取りが必要なデータ向け（認証トークン、セッション管理）
はじめに
Web開発をしていると、ブラウザ上でデータを保存する場面が必ず出てきます。
ユーザーの設定を覚えておきたい、入力途中のフォームを保持したい、ログイン状態を管理したい...
そんなとき、localStorage、sessionStorage、Cookieという3つの選択肢があります。
これらは一見似ていますが、使い方を間違えると思わぬトラブルの原因になります。私自身、プロジェクトで適切に使い分けられずに苦労した経験があります。
この記事では、それぞれの特徴と「いつ、どれを使うべきか」について、実務での経験をもとに解説します。
特徴比較
| 特性 | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| 持続性 | ブラウザを閉じても保持 | タブを閉じると消失 | 有効期限を設定可能 |
| 容量 | 約5MB | 約5MB | 約4KB |
| スコープ | オリジン単位 | オリジン＋タブ単位 | ドメイン・パス指定可能 |
| HTTP通信 | サーバーに送信されない | サーバーに送信されない | リクエスト時に自動送信 |
| アクセス | JS のみ | JS のみ | JS・サーバー両方 |
localStorage
役割
- 長期的なデータ保存
- ブラウザを閉じても保持されるクライアントサイドストレージ
最適な使用状況
- ユーザー設定・テーマ
- 買い物かごの内容
- オフラインでも使えるデータ
- 頻繁に変更されない非機密情報
localStorage.setItem('theme', 'dark');
sessionStorage
役割
- 一時的なデータ保存
- タブ/ウィンドウが開いている間だけ保持される
最適な使用状況
- フォームの一時保存
- 単一ページセッションのデータ
- 複数タブで共有すべきでない一時情報
- 戻るボタンでの状態保持
sessionStorage.setItem('formData', JSON.stringify(formValues));
Cookie
役割
- サーバーとクライアント間の情報共有
- セッション管理や認証に使用
最適な使用状況
- 認証トークン
- サーバーサイドセッション管理
- トラッキングID
- サーバーに送信する必要がある少量データ
nookiesを使った実装例（Next.js向け）
import { setCookie, parseCookies, destroyCookie } from 'nookies';
// クライアントサイドでの使用
// Cookieの設定
setCookie(null, 'token', 'value123', {
maxAge: 30 * 24 * 60 * 60, // 30日間
path: '/',
secure: process.env.NODE_ENV !== 'development',
sameSite: 'strict'
});
// Cookieの取得
const cookies = parseCookies();
const token = cookies.token;
// Cookieの削除
destroyCookie(null, 'token');
// サーバーサイドでの使用（getServerSidePropsなど）
export async function getServerSideProps(context) {
// サーバーサイドでCookieを設定
setCookie(context, 'serverToken', 'value456', {
httpOnly: true, // サーバーサイドからのみアクセス可能
maxAge: 30 * 24 * 60 * 60,
path: '/',
secure: process.env.NODE_ENV !== 'development',
sameSite: 'strict'
});
// サーバーサイドでCookieを取得
const cookies = parseCookies(context);
return { props: { serverData: cookies.serverToken || 'no data' } };
}
セキュリティ考慮点
- localStorage/sessionStorage：XSSに脆弱なため機密情報は保存しない
- Cookie：機密情報には必ず HttpOnly, Secure, SameSite 属性を設定
- クライアントストレージの信頼性：クライアントサイドストレージはユーザーによる改ざんが可能。重要なデータの検証は必ずサーバーサイドで行う
選択の指針
結局のところ、選ぶべきストレージは用途で決まります。
サーバーと情報をやり取りする必要があればCookie一択。
それ以外は長く保存したいならlocalStorage、そのページを見ている間だけならsessionStorageといったようにデータの寿命で選択すると良いと思います。
個人的には、認証情報はCookie、UIの状態や設定はlocalStorage、一時的なフォーム入力はsessionStorageで管理するのがバランス良いと感じています。