完成イメージ
作成ファイル・保存場所
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>
<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.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
}));
});
</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 から消えます。テスト用に「もう一度ボタンを押したい」時などに便利です。