JavaScript で LocalStorage を使用してデータを保存および取得する方法

LocalStorage を使用すると、開発者はユーザーのブラウザに永続的にキーと値のデータを保存できます。ユーザー設定の保存、API レスポンスのキャッシュ、セッション間でのアプリケーション状態の維持に役立ちます。

LocalStorage の理解

LocalStorage は Web Storage API の一部であり、データの保存、取得、削除のためのメソッドを提供します：

localStorage.setItem('theme', 'dark'); // データを保存
const theme = localStorage.getItem('theme'); // データを取得
localStorage.removeItem('theme'); // 特定の項目を削除
localStorage.clear(); // 保存されたすべてのデータをクリア

LocalStorage は明示的に削除されるまでデータを保持します。データは文字列として保存されるため、オブジェクトや配列の場合は JSON.stringify() と JSON.parse() を使用します：

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // ""dark""

ユースケース 1：ユーザー設定の保存

LocalStorage はテーマ設定などの UI 設定の保存によく使用されます。

// テーマ設定の保存
localStorage.setItem('theme', 'dark');

// ページ読み込み時に保存された設定を適用
const savedTheme = localStorage.getItem('theme');
if (savedTheme) applyTheme(savedTheme);

ユースケース 2：API レスポンスのキャッシュ

API レスポンスをキャッシュすることで、不要なネットワークリクエストを減らしパフォーマンスを向上させます。

const cacheKey = 'apiData';
const maxAge = 60 * 60 * 1000; // 1時間

const cached = localStorage.getItem(cacheKey);
if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < maxAge) {
        renderData(data);
    } else {
        localStorage.removeItem(cacheKey);
    }
}

if (!localStorage.getItem(cacheKey)) {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            renderData(data);
            localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: Date.now() }));
        });
}

LocalStorage と他の Web ストレージオプションの比較

• SessionStorage：LocalStorage と同じ API ですが、タブが閉じられるとデータが消去されます。
• IndexedDB：構造化されたクエリで大規模なデータストレージをサポートしますが、より複雑です。
• Cookies：サーバーサイドストレージに使用され、HTTP リクエストと共に自動的に送信されます。

制限事項とベストプラクティス

• セキュリティリスク：データは JavaScript からアクセス可能なため、機密情報を保存しないでください。
• ストレージ制限：オリジンごとに約 5MB で、これを超えると QuotaExceededError がスローされます。
• 同期アクセス：大きな読み書きはメインスレッドをブロックする可能性があります。
• 自動有効期限なし：必要に応じて有効期限のロジックを手動で実装する必要があります。
• 名前空間の使用：キーの競合を避けるために接頭辞を付けます（theme ではなく MyApp_theme など）。

結論

LocalStorage は少量のクライアントサイドデータを永続化するためのシンプルかつ強力なツールです。ユーザー設定の保存や軽量な API レスポンスのキャッシュに最適です。ただし、開発者はセキュリティ上の制限に注意し、パフォーマンスの問題を避けるために適切なデータ処理を確保する必要があります。

よくある質問