結論

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で管理するのがバランス良いと感じています。