• ローカルストレージとは
• ローカルストレージの基本的な使い方
• データを保存する方法
• データを取得する方法
• データを削除する方法
• 実践的なサンプルコード
• ローカルストレージの活用例
• ローカルストレージの制限

ローカルストレージとは

ローカルストレージ（localStorage）は、ブラウザにデータを保存できるWebストレージ機能の一つです。 クッキーと異なり、データの有効期限がなく、ユーザーが明示的に削除しない限り保持されます。

ローカルストレージの基本的な使い方

localStorageはJavaScriptを使用してデータの保存・取得・削除が可能です。 以下のメソッドを使用します：

• localStorage.setItem(key, value): データを保存
• localStorage.getItem(key): データを取得
• localStorage.removeItem(key): 指定したデータを削除
• localStorage.clear(): すべてのデータを削除

データを保存する方法

以下のコードでローカルストレージにデータを保存できます：

        localStorage.setItem("username", "Taro");
    

このコードは “username” というキーに “Taro” という値を保存します。

データを取得する方法

保存されたデータを取得するには、以下のように記述します：

        let username = localStorage.getItem("username");
        console.log(username); // "Taro" が表示される
    

データを削除する方法

特定のデータを削除するには、以下のようにします：

        localStorage.removeItem("username");
    

すべてのデータを削除する場合：

        localStorage.clear();
    

実践的なサンプルコード

次のコードは、ユーザーが入力した名前をローカルストレージに保存し、次回アクセス時に自動で表示するものです。

        <input type="text" id="nameInput" placeholder="名前を入力">
        <button onclick="saveName()">保存</button>
        <p id="greeting"></p>

        <script>
        function saveName() {
            let name = document.getElementById("nameInput").value;
            localStorage.setItem("username", name);
            displayGreeting();
        }

        function displayGreeting() {
            let storedName = localStorage.getItem("username");
            if (storedName) {
                document.getElementById("greeting").textContent = "こんにちは、" + storedName + " さん！";
            }
        }

        window.onload = displayGreeting;
        </script>
    

ローカルストレージの活用例

ローカルストレージは、以下のような場面で活用できます：

• ユーザーの設定やテーマの保存（ダークモードの設定など）
• フォームの自動入力
• ショッピングカートのデータ保持
• ゲームの進捗データの保存

ローカルストレージの制限

ローカルストレージにはいくつかの制限があります：

• 保存できるデータは文字列のみ（JSONを使えばオブジェクトも保存可能）
• 各ドメインごとに5MB程度の制限がある
• セキュリティ上の理由で機密データの保存には不向き
• 他のデバイスやブラウザではデータが共有されない