JavaScriptでブラウザに結果を保存してみよう！（localStorage ）

完成イメージ

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom11.html	基本動作練習用HTML/js
js-dom__11.html	ステップアップ練習用HTML/js

JavaScriptは <script> タグ内に直接記述してください（内部JS）

今回のテーマ

JavaScriptでAPIから取得したデータを localStorage に保存し、再利用できるようにします。
「ページをリロードしても結果が残る」「1日1回だけ占える」など、日常的なUXの仕組み。

目的

localStorage.setItem() / .getItem() の使い方を理解する
APIから取得した結果を保存し、再利用できるようにする
データに日付を付けて「今日もう占ったか？」を判定する

チェックポイント

APIから取得した結果を localStorage に保存できているか？
保存したデータをページ再読み込み後も読み取れているか？
日付を使って「毎日1回だけ表示」の制御ができているか？

`localStorage`とは？

ブラウザにデータを保存できるしくみ（キーと値で記録）。保存データはページを閉じても残る（半永久的）

// 保存する
localStorage.setItem('key', 'value');

// 取り出す
const value = localStorage.getItem('key');

`sessionStorage` とは？

localStorage によく似ていますが、「ページを閉じると消える一時的な保存」です。同じタブの間だけ有効で、別のタブやページでは使えません。

// 保存する
sessionStorage.setItem('key', 'value');

// 取り出す
const value = sessionStorage.getItem('key');

JavaScript基礎トレーニング1

おみくじは1日１回にする

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>おみくじ（保存付き）</title>
</head>

<body>
    <h1>おみくじ</h1>
    <button id="btn">今日の運勢を占う</button>
    <p id="result">ここに結果が表示されます</p>

    <button id="reset">リセット</button>

    <script>
        const btn = document.getElementById('btn');
        const result = document.getElementById('result');
        const key = 'fortune';
        const today = new Date().toLocaleDateString();

        // ページ読み込み時にlocalStorage確認
        const saved = JSON.parse(localStorage.getItem(key));
        if (saved && saved.date === today) {
            result.textContent = `（保存表示）今日の運勢：${saved.result}`;
            btn.disabled = true; // ← ボタン無効化
        }

        btn.addEventListener('click', () => {
            const list = ['大吉', '中吉', '小吉', '吉', '凶'];
            const choice = list[Math.floor(Math.random() * list.length)];

            result.textContent = `今日の運勢：${choice}`;
            localStorage.setItem(key, JSON.stringify({
                date: today,
                result: choice
            }));

            btn.disabled = true; // ← 1回引いたら無効化
        });

        document.getElementById('reset').addEventListener('click', () => {
            localStorage.removeItem('fortune');
            alert("保存された運勢を削除しました！");
            location.reload(); // 画面をリロード
        });
    </script>
</body>

</html>

今日の日付を取得する

const today = new Date().toLocaleDateString();

new Date() で現在の日付・時間を取得します。.toLocaleDateString() を使うことで、「2025/7/5」のような形式の文字列になります。今日のデータかどうかを判定するのに使います。

保存されているデータを読み込む

const saved = JSON.parse(localStorage.getItem(key));

localStorage.getItem(key) で保存された文字列データを取得します。ただし、これは文字列（例："{\"date\":\"2025/7/5\",\"result\":\"中吉\"}"）なので、JSON.parse() でオブジェクトに戻して使いやすくします。

データを保存する（今日の占い結果）

localStorage.setItem(key, JSON.stringify({
  date: today,
  result: choice
}));

setItem() は、データを保存する関数です。保存する内容は JavaScript のオブジェクトですが、そのままでは保存できないので JSON.stringify() を使って文字列に変換します。

データを削除する

localStorage.removeItem(key);

保存されていたデータを削除します。key で指定したデータが localStorage から消えます。テスト用に「もう一度ボタンを押したい」時などに便利です。