Day20：localStorageの練習問題
localStorage は「ブラウザにデータを保存する」ための仕組みで、
Web アプリを作るうえで欠かせない機能です。
ここでは Day20 の内容をしっかり定着させるために、
基礎から応用までの練習問題と丁寧な解答・解説をまとめます。
文字列の保存と取得
問題1：名前を localStorage に保存し、次回読み込んで表示してください
次の HTML を前提とします。
<input id="nameInput" type="text" placeholder="名前を入力">
<button id="saveButton">保存</button>
<p id="result"></p>
解答と解説
const nameInput = document.getElementById("nameInput");
const saveButton = document.getElementById("saveButton");
const result = document.getElementById("result");
const savedName = localStorage.getItem("savedName");
if (savedName !== null) {
result.textContent = `前回の名前：${savedName}`;
nameInput.value = savedName;
}
saveButton.addEventListener("click", () => {
const name = nameInput.value.trim();
if (name === "") {
result.textContent = "名前を入力してください。";
return;
}
localStorage.setItem("savedName", name);
result.textContent = `保存しました：${name}`;
});
localStorage は「文字列しか保存できない」ため、
保存も取得も文字列として扱われます。
存在しないキーを getItem すると null になる点も重要です。
数値の保存と取り出し
問題2：ボタンを押した回数を保存し、リロード後も続きからカウントしてください
次の HTML を前提とします。
<p id="countDisplay">0</p>
<button id="countButton">カウントアップ</button>
解答と解説
const countDisplay = document.getElementById("countDisplay");
const countButton = document.getElementById("countButton");
let count = 0;
const savedCount = localStorage.getItem("count");
if (savedCount !== null) {
count = Number(savedCount);
countDisplay.textContent = count;
}
countButton.addEventListener("click", () => {
count += 1;
countDisplay.textContent = count;
localStorage.setItem("count", String(count));
});
localStorage は数値も文字列として保存するため、
取り出したら Number() で数値に変換する必要があります。
これを忘れると "10" + 1 = "101" のような文字列結合が起きます。
データの削除
問題3：保存した名前を削除するボタンを追加してください
次の HTML を前提とします。
<p id="result"></p>
<button id="deleteButton">削除</button>
解答と解説
const deleteButton = document.getElementById("deleteButton");
const result = document.getElementById("result");
deleteButton.addEventListener("click", () => {
localStorage.removeItem("savedName");
result.textContent = "保存された名前を削除しました。";
});
removeItem は「特定のキーだけ削除」するためのメソッドです。
clear() を使うと localStorage 全体が消えるため、通常は removeItem を使います。
配列の保存（JSON）
問題4：好きな食べ物を追加して保存し、リロード後も一覧を表示してください
次の HTML を前提とします。
<input id="foodInput" type="text" placeholder="好きな食べ物">
<button id="addButton">追加</button>
<ul id="foodList"></ul>
解答と解説
const foodInput = document.getElementById("foodInput");
const addButton = document.getElementById("addButton");
const foodList = document.getElementById("foodList");
let foods = [];
const savedFoods = localStorage.getItem("foods");
if (savedFoods !== null) {
foods = JSON.parse(savedFoods);
}
function renderFoods() {
foodList.innerHTML = "";
foods.forEach((food) => {
const li = document.createElement("li");
li.textContent = food;
foodList.appendChild(li);
});
}
renderFoods();
addButton.addEventListener("click", () => {
const food = foodInput.value.trim();
if (food === "") return;
foods.push(food);
localStorage.setItem("foods", JSON.stringify(foods));
renderFoods();
foodInput.value = "";
});
localStorage は文字列しか保存できないため、
配列は JSON.stringify で文字列化して保存し、
取り出すときは JSON.parse で配列に戻します。
オブジェクトの保存（JSON）
問題5：ユーザー設定（名前・テーマ）をオブジェクトで保存してください
次の HTML を前提とします。
<input id="nameInput" type="text" placeholder="名前">
<select id="themeSelect">
<option value="light">ライト</option>
<option value="dark">ダーク</option>
</select>
<button id="saveButton">保存</button>
<p id="result"></p>
解答と解説
const nameInput = document.getElementById("nameInput");
const themeSelect = document.getElementById("themeSelect");
const saveButton = document.getElementById("saveButton");
const result = document.getElementById("result");
const savedSettings = localStorage.getItem("settings");
if (savedSettings !== null) {
const settings = JSON.parse(savedSettings);
nameInput.value = settings.name;
themeSelect.value = settings.theme;
}
saveButton.addEventListener("click", () => {
const settings = {
name: nameInput.value.trim(),
theme: themeSelect.value
};
localStorage.setItem("settings", JSON.stringify(settings));
result.textContent = "設定を保存しました。";
});
オブジェクトも配列と同じく JSON.stringify / JSON.parse を使います。
localStorage を「小さなデータベース」として扱えるようになります。
セキュリティ問題：保存してはいけないデータ
問題6：localStorage に保存してはいけないデータを説明してください
（文章で答える問題）
解答と解説
localStorage はブラウザ内で誰でも簡単に閲覧できるため、
次のような機密情報を保存してはいけません。
パスワード
クレジットカード番号
認証トークン（特に長期間有効なもの）
localStorage は「ユーザーの端末に置くメモ帳」程度の扱いで、
安全な保管場所ではありません。
本番のアプリでは、機密情報は必ずサーバー側で管理します。
localStorage のクリア
問題7：localStorage の全データを削除するボタンを作ってください
次の HTML を前提とします。
<button id="clearButton">全削除</button>
<p id="result"></p>
解答と解説
const clearButton = document.getElementById("clearButton");
const result = document.getElementById("result");
clearButton.addEventListener("click", () => {
localStorage.clear();
result.textContent = "localStorage のデータをすべて削除しました。";
});
clear() は「そのサイトの localStorage をすべて削除」します。
他のデータも消えるため、慎重に使う必要があります。
Day20 練習問題まとめ
今回の練習問題で、localStorage の基礎〜応用がしっかり身につきます。
文字列の保存・取得
数値の保存（Number 変換）
removeItem / clear
配列の保存（JSON.stringify / JSON.parse）
オブジェクトの保存
設定保存への応用
保存してはいけないデータ（セキュリティ）
localStorage を使えるようになると、
「リロードしても消えない Web アプリ」が作れるようになり、
あなたの JavaScript の世界が一気に広がります。