ローカル ストレージとセッション ストレージ: それぞれをいつ使用するか (ミニ プロジェクトの場合)

Web アプリケーションで localStorage と sessionStorage のどちらを使用するべきか考えたことはありますか?あなたは一人ではありません！

私もその経験があり、これら 2 つのストレージ オプションのどちらが自分のユースケースに最適なのか疑問に思っています。

Web ストレージは Web 開発の最も魅力的な部分ではありませんが、実際に何かを実行する最新の Web アプリケーションを構築するためには不可欠です。

ユーザー設定を保存したり、フォーム データやショッピング カートを操作したりする場合は、ユースケースに適した保存方法を決定する必要があります。

理論が多すぎて、理論が混乱を招くこともあるため、詳細については説明しません。両方のストレージを実際のコード例とともに示します。

この投稿の最後で、どのソリューションをいつ適用するかがわかります...

だから、これからも付き合ってください!

基本: 本当に知っておくべきこと

localStorage はノートブックのようなもので、sessionStorage は付箋の束のようなものです。ノートはページを破る (データを消去する) まで手元に残りますが、付箋は机の引き出しを閉める (セッションを終了する) ときに捨てられます。

共通点のいくつかを次に示します:

• どちらもキー値の形式でデータを保存します。

• 約 5 ～ 10 MB のストレージが提供されます (ブラウザによって異なります)

• それらは同期的であり、文字列のみを保存します (はい、オブジェクトでも JSON 変換が必要です)

• これらは同じ単純な API を通じてアクセスされます。

さて、これらの違いは次のとおりです。

ローカルストレージ:

• 手動でクリアするまで残ります

• ブラウザのタブとウィンドウ間でデータを保持します

• 何か (ユーザー設定や保存されたゲーム状態など) をあまり長く保持しないでください

セッションストレージ:

• ブラウザのタブを閉じると消えます。

• 作業している特定のタブから隔離されたままになります

• 永続化すべきではない一時的なデータ (フォームの状態やワンタイム トークンなど) に最適です

簡単な補足: どちらのストレージ タイプもフロントエンドのみです。ここでは機密データを扱わないでください。安全なバックエンド ストレージはそのためにあります。

localStorage の詳細

正直に言うと、おそらくこのストレージをほとんどの時間使用しているでしょうが、それには正当な理由があります。ブラウザー セッション間でデータを保持する必要がある場合、localStorage を使用する以外に優れた選択肢はありません。

localStorage の最適な使用例:

• テーマの設定 (ダーク/ライト モード)
• ショッピングカート内の商品
• ユーザーの言語設定
• ゲームの進行状況
• キャッシュされた API レスポンス

急いでください - あまりにも多くの開発者がこれらを苦労して学んでいるところを見てきました:

• 機密データをここに保存しないでください (安全ではありません)
• ストレージ制限に注意してください
• 保存する前に必ず JSON.stringify を使用してください
• 有効期限に注意してください - localStorage は自動的に期限切れになりません

非常に単純なテーマ スイッチャーを使用した具体的な例を示します。

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved theme on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
        themeToggle.checked = savedTheme === 'dark-mode';
    }
});

// Handle theme changes
themeToggle.addEventListener('change', () => {
    if (themeToggle.checked) {
        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    } else {
        body.classList.remove('dark-mode');
        localStorage.setItem('theme', 'light-mode');
    }
});

このコードは非常にシンプルで、ユーザーの好みのテーマを保存し、ユーザーが再度アクセスするたびに自動的に適用されます。実用的であるだけで特別なことは何もありません。

セッションストレージ

時々、少しの間だけデータを残しておきたいことがあります。そこで、sessionStorage が威力を発揮します。

ユーザーがブラウザーのタブを閉じるまで、1 秒も経過しないまで何かを追跡したいときのことを考えてください。

sessionStorage に最適なシナリオ:

• マルチステップフォームデータ
• 一時認証トークン
• 単一セッションのユーザー設定
• 長い記事のページ位置
• ウィザードまたはチュートリアルの進行状況

ここでは、sessionStorage の動作を示す複数ステップのフォーム コードを示します。

// Multi-Step Form Mini-Project
const formSteps = {
    saveStep(stepNumber, data) {
        sessionStorage.setItem(`formStep${stepNumber}`, JSON.stringify(data));
    },

    loadStep(stepNumber) {
        const savedData = sessionStorage.getItem(`formStep${stepNumber}`);
        return savedData ? JSON.parse(savedData) : null;
    },

    clearForm() {
        // Clear only our form data, not other sessionStorage items
        for (let i = 1; i <= 3; i++) {
            sessionStorage.removeItem(`formStep${i}`);
        }
    }
};

// Example usage in form steps
document.getElementById('step1-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    formSteps.saveStep(1, data);
    // Move to next step
});

// Load saved data when user returns to a step
window.addEventListener('load', () => {
    const step1Data = formSteps.loadStep(1);
    if (step1Data) {
        document.getElementById('name').value = step1Data.name;
        document.getElementById('email').value = step1Data.email;
    }
});

ここで重要なのは、誰かが誤ってタブを閉じた場合でも、新しい状態から開始され、古いデータが残らないことです。ただし、ステップ間を移動しているだけの場合、進捗は安全です。

正しい選択をする

本題に入りましょう - ストレージに関する決定のきっかけとなるものは次のとおりです。

次の場合に localStorage を選択します。

• ユーザーは自分のデータが保持されることを期待します (保存された設定など)
• 頻繁に変更されないデータをキャッシュしています
• タブ間でデータを共有する必要があります
• ユーザーの利便性はデータの鮮度を上回ります

次の場合に sessionStorage を使用します。

• データは設計上一時的なものである必要があります
• 機密性の高い一時トークンを扱っています
• 各タブには独自の分離状態が必要です
• 再起動時にクリーンスレートを保証したい

実際に重要なパフォーマンスのヒント:

• 大規模なオブジェクトを保存しないでください - どちらのストレージ タイプも同期です
• 可能な場合はストレージ操作をバッチ処理します
• 5～10MB の制限に注意してください
• 常にストレージ エラーを処理します (ユーザーが無効にしている可能性があります)

よくある問題:

• 保存する前に必ずオブジェクトを文字列化してください
• ストレージが利用可能であると想定しないでください
• 複数タブのシナリオではストレージ イベントに注意してください
• 古い/未使用のデータを忘れずにクリーンアップしてください

最終的な考え: 適切な仕事には適切なツールを選択してください。 localStorage は、永続的であるという理由だけで必ずしも優れているとは限りません。また、sessionStorage は、クリーンであるという理由だけで必ずしも優れているとは限りません。まずユーザーのニーズを考えてください。

疑問がある場合は、次のように自問してください。
「このデータはブラウザを再起動しても存続する必要がありますか?」

• はい → localStorage
• いいえ → セッションストレージ

正しい選択をするために知っておくべきことはこれだけです。構築を開始してください!

以上がローカル ストレージとセッション ストレージ: それぞれをいつ使用するか (ミニ プロジェクトの場合)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。