JavaScriptでブラウザにデータを保存！sessionStorageとlocalStorageの徹底解説と使い分け

はじめに

Webアプリケーションを開発する際、ユーザーのデータをブラウザに一時的または永続的に保存したい場面は多々あります。例えば、ログイン状態の保持、フォームの入力値の一時保存、ユーザー設定の記憶などです。JavaScriptには、このような目的のためにsessionStorageとlocalStorageという便利な機能が用意されています。

しかし、これら二つの機能は似ているようで、そのデータ保持期間やスコープ（データの有効範囲）に大きな違いがあります。この違いを正しく理解し、適切に使い分けることが、堅牢でユーザーフレンドリーなWebアプリケーションを開発する上で非常に重要です。

本記事では、sessionStorageとlocalStorageの基本的な使い方から、データ保持期間、スコープの違い、そして具体的な使い分け例までを、初心者の方にも分かりやすいように徹底的に解説します。この記事を読めば、あなたのWeb開発がさらにスムーズになること間違いなしです！

Webブラウザのデータ保存メカニズムとは？

Webブラウザは、Webサイトの閲覧履歴やキャッシュ、Cookieなど、様々なデータを保存する機能を持っています。ここで解説するsessionStorageとlocalStorageも、ブラウザが提供するデータ保存機能の一部です。

これらの機能は、サーバーとの通信なしにクライアントサイドでデータを管理できるため、Webアプリケーションのパフォーマンス向上やユーザー体験の改善に貢献します。

Cookieとの違い

• Cookie: サーバーとブラウザ間で自動的に送受信される。容量が小さく（数KB）、有効期限を設定できる。主にセッション管理やユーザー追跡に使われる。
• sessionStorage / localStorage: JavaScriptからのみアクセス可能。サーバーには自動的に送信されない。容量が大きく（数MB）、より多くのデータを保存できる。

sessionStorageとは？

sessionStorageは、ブラウザのセッションが終了するまでデータを保持するストレージです。

データ保持期間とスコープ

• 保持期間: ブラウザのタブまたはウィンドウが閉じられるまで。ブラウザ全体を閉じたり、そのタブを閉じたりするとデータは消滅します。ページのリロードやナビゲーションではデータは消えません。
• スコープ: 同一オリジン（プロトコル、ホスト、ポートが同じ）かつ、同一のブラウザタブ/ウィンドウ内でのみ有効です。つまり、同じWebサイトでも別のタブで開いた場合は、それぞれ独立したsessionStorageを持ちます。
• 容量: 一般的に5MB程度（ブラウザによって異なる）。

sessionStorageの基本的な使い方

sessionStorageは、setItem()でデータを保存し、getItem()で取得します。キーと値はどちらも文字列で指定します。

// データを保存する
sessionStorage.setItem('username', 'Alice');
sessionStorage.setItem('theme', 'dark');

// データを取得する
const username = sessionStorage.getItem('username');
const theme = sessionStorage.getItem('theme');
console.log('ユーザー名:', username); // 出力: ユーザー名: Alice
console.log('テーマ:', theme);     // 出力: テーマ: dark

// 存在しないキーを取得すると null が返る
const nonExistentKey = sessionStorage.getItem('nonExistent');
console.log('存在しないキー:', nonExistentKey); // 出力: 存在しないキー: null

// データを削除する
sessionStorage.removeItem('theme');
console.log('テーマ (削除後):', sessionStorage.getItem('theme')); // 出力: テーマ (削除後): null

// すべてのデータをクリアする
sessionStorage.clear();
console.log('ユーザー名 (クリア後):', sessionStorage.getItem('username')); // 出力: ユーザー名 (クリア後): null

sessionStorageの使い分け例

• フォームの一時保存: ユーザーが入力途中のフォームデータを、誤ってページを離れても復元できるように一時的に保存する。
• シングルページアプリケーション (SPA) のセッション管理: ログインセッションIDや一時的なユーザー設定など、現在のセッション中にのみ必要な情報を保存する。
• 一時的なメッセージ表示: 「商品をカートに追加しました」のような、ページ遷移後も一度だけ表示したいメッセージを保持する。

具体的なフォーム一時保存の例:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage フォーム一時保存例</title>
</head>
<body>
    <h1>お問い合わせフォーム</h1>
    <form>
        <label for="name">お名前:</label>
        <input type="text" id="name" onkeyup="saveForm()"><br><br>

        <label for="email">メールアドレス:</label>
        <input type="email" id="email" onkeyup="saveForm()"><br><br>

        <label for="message">お問い合わせ内容:</label><br>
        <textarea id="message" rows="5" cols="30" onkeyup="saveForm()"></textarea><br><br>

        <button type="submit">送信</button>
        <button type="button" onclick="clearForm()">入力クリア</button>
    </form>

    <script>
        // ページロード時に保存されたデータを読み込む
        window.onload = function() {
            document.getElementById('name').value = sessionStorage.getItem('formName') || '';
            document.getElementById('email').value = sessionStorage.getItem('formEmail') || '';
            document.getElementById('message').value = sessionStorage.getItem('formMessage') || '';
        };

        // 入力時にデータをsessionStorageに保存する
        function saveForm() {
            sessionStorage.setItem('formName', document.getElementById('name').value);
            sessionStorage.setItem('formEmail', document.getElementById('email').value);
            sessionStorage.setItem('formMessage', document.getElementById('message').value);
        }

        // フォームデータをクリアし、sessionStorageからも削除する
        function clearForm() {
            document.getElementById('name').value = '';
            document.getElementById('email').value = '';
            document.getElementById('message').value = '';
            sessionStorage.removeItem('formName');
            sessionStorage.removeItem('formEmail');
            sessionStorage.removeItem('formMessage');
            alert('フォーム内容と一時保存データをクリアしました。');
        }
    </script>
</body>
</html>

localStorageとは？

localStorageは、明示的に削除しない限り、ブラウザを閉じてもデータが永続的に保持されるストレージです。

データ保持期間とスコープ

• 保持期間: ユーザーがブラウザのキャッシュをクリアしたり、JavaScriptで明示的に削除しない限り、半永久的にデータが保持されます。
• スコープ: 同一オリジン（プロトコル、ホスト、ポートが同じ）であれば、ブラウザの異なるタブやウィンドウ間でもデータを共有できます。
• 容量: 一般的に5MB～10MB程度（ブラウザによって異なる）。sessionStorageよりも少し大きいことが多いです。

localStorageの基本的な使い方

localStorageの使い方はsessionStorageと全く同じです。

// データを保存する
localStorage.setItem('user_id', '12345');
localStorage.setItem('settings', JSON.stringify({ theme: 'light', notifications: true })); // オブジェクトはJSON文字列に変換して保存

// データを取得する
const userId = localStorage.getItem('user_id');
const settingsString = localStorage.getItem('settings');
const settings = JSON.parse(settingsString); // JSON文字列をオブジェクトに戻す
console.log('ユーザーID:', userId);         // 出力: ユーザーID: 12345
console.log('設定:', settings);             // 出力: 設定: { theme: 'light', notifications: true }

// データを削除する
localStorage.removeItem('user_id');
console.log('ユーザーID (削除後):', localStorage.getItem('user_id')); // 出力: ユーザーID (削除後): null

// すべてのデータをクリアする
localStorage.clear();
console.log('設定 (クリア後):', localStorage.getItem('settings')); // 出力: 設定 (クリア後): null

【重要】オブジェクトや配列を保存する場合:
localStorageやsessionStorageは、キーと値が文字列である必要があります。JavaScriptのオブジェクトや配列を保存したい場合は、JSON.stringify()で文字列に変換し、取得時にはJSON.parse()で元のオブジェクトに戻す必要があります。

const user = {
    name: 'Taro',
    age: 30,
    email: 'taro@example.com'
};

// オブジェクトをJSON文字列に変換して保存
localStorage.setItem('userProfile', JSON.stringify(user));

// 取得してJSONオブジェクトに戻す
const storedUserString = localStorage.getItem('userProfile');
const storedUser = JSON.parse(storedUserString);

console.log(storedUser.name); // 出力: Taro

localStorageの使い分け例

• ログイン状態の保持: 「次回から自動ログイン」のような機能で、ユーザーIDやトークンを保存する。
• ユーザー設定の保存: テーマカラー、言語設定、表示オプションなど、ユーザーがカスタマイズした設定を永続的に保存する。
• オフラインデータ保存: Webアプリケーションがオフラインでも動作するように、必要なデータをキャッシュとして保存する（ただし、IndexedDBの方が大規模データには適している）。
• 閲覧履歴やカート情報: ユーザーが過去に閲覧した商品や、カートに入れた商品を記憶しておく。

具体的なユーザー設定保存の例:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage ユーザー設定例</title>
    <style>
        body { font-family: sans-serif; }
        .dark-mode { background-color: #333; color: #eee; }
        .light-mode { background-color: #eee; color: #333; }
    </style>
</head>
<body>
    <h1>ユーザー設定</h1>
    <p>ページを閉じても設定は記憶されます。</p>
    <label for="theme-selector">テーマを選択:</label>
    <select id="theme-selector" onchange="changeTheme(this.value)">
        <option value="light">ライトモード</option>
        <option value="dark">ダークモード</option>
    </select>

    <script>
        // ページロード時に保存されたテーマを適用する
        window.onload = function() {
            const savedTheme = localStorage.getItem('userTheme');
            if (savedTheme) {
                document.body.className = savedTheme + '-mode';
                document.getElementById('theme-selector').value = savedTheme;
            } else {
                // デフォルトはライトモード
                document.body.className = 'light-mode';
                localStorage.setItem('userTheme', 'light');
            }
        };

        // テーマを変更し、localStorageに保存する
        function changeTheme(theme) {
            document.body.className = theme + '-mode';
            localStorage.setItem('userTheme', theme);
            alert('テーマを ' + (theme === 'dark' ? 'ダークモード' : 'ライトモード') + ' に変更し、保存しました。');
        }
    </script>
</body>
</html>

sessionStorageとlocalStorageの比較

二つのストレージの違いを以下の表にまとめました。

項目	sessionStorage	localStorage
データ保持期間	ブラウザのタブ/ウィンドウを閉じるまで（セッション終了まで）	明示的に削除しない限り永続的
スコープ	同一オリジン、同一タブ/ウィンドウ内のみ	同一オリジンであれば、全タブ/ウィンドウで共有
容量	約5MB	約5MB～10MB
サーバー送信	なし	なし
JavaScriptからのアクセス	可能	可能
使い道の例	フォームの一時保存、SPAのセッション管理、一時的なメッセージ	ログイン状態、ユーザー設定、閲覧履歴、オフラインデータ

どちらを選ぶべきか？使い分けのポイント

sessionStorageとlocalStorageのどちらを使うべきかは、保存したいデータの性質によって決まります。

• 一時的なデータ、現在のセッション中にのみ必要なデータ: ユーザーがタブを閉じたら消えても問題ないデータ（例: フォームの入力途中データ、一時的なUIの状態、短命なセッションIDなど）にはsessionStorageを選びましょう。
• 永続的なデータ、ブラウザを閉じても保持したいデータ: ユーザーが再度訪問した際にも利用したいデータ（例: ログイン状態、ユーザー設定、カート内容、閲覧履歴など）にはlocalStorageを選びましょう。

セキュリティに関しては、どちらもクライアントサイドに保存されるため、機密性の高いパスワードなどの情報を直接保存するのには適していません。これらはサーバーサイドで安全に管理する必要があります。

まとめ

本記事では、Web開発で非常に役立つsessionStorageとlocalStorageについて、その基本的な使い方、データ保持期間とスコープの違い、そして具体的な使い分け例を解説しました。

• sessionStorageは、タブを閉じるとデータが消える一時的な保存に適しています。
• localStorageは、明示的に削除しない限りデータが残る永続的な保存に適しています。

これらのストレージ機能を適切に使いこなすことで、ユーザー体験を向上させ、よりリッチなWebアプリケーションを開発することができます。ぜひ、あなたのプロジェクトで活用してみてください。