Day20 前半のゴール
ここまでで「入力して」「チェックして」「画面に表示する」ところまでは来ました。
Day20 では、そこから一歩進んで、「データをブラウザに保存する」ことを学びます。
キーワードは localStorage（ローカルストレージ）です。
前半でつかみたい感覚
ページをリロードしても消えない「保存場所」がブラウザの中にある
localStorage は「キーと値」を文字列として保存する仕組み
setItem / getItem / removeItem / clear の基本操作を理解する
localStorage とは何か
「ブラウザの中の小さなデータベース」
普通、JavaScript の変数はページをリロードすると消えます。
let count = 0;
この count は、ページを閉じたら終わりです。
でも、Web アプリを作るときには
前回入力した名前を覚えておきたい
設定（ダークモードなど）を保持したい
簡単なメモをブラウザに残したい
といった「次回も使いたいデータ」が出てきます。
そこで使えるのが localStorage です。
ブラウザが提供している「永続的な保存場所」で、
ユーザーごと・サイトごとにデータを保存できます。
localStorage の基本的な使い方
キーと値で保存する
localStorage は「キーと値」のペアでデータを保存します。
すべて文字列として扱われる、というのが大事なポイントです。
代表的なメソッドは次の4つです。
setItem(キー, 値)
getItem(キー)
removeItem(キー)
clear()
まずは一番シンプルな例から。
localStorage.setItem("username", "Taro");
これで、「username」というキーで “Taro” という文字列が保存されます。
取り出すときはこうです。
const name = localStorage.getItem("username");
console.log(name); // "Taro"
存在しないキーを getItem すると、結果は null になります。
ここをちゃんと意識しておくと、後で条件分岐を書くときに迷いません。
例題：名前を保存して、次回も表示する
HTML を用意する
まずは「名前を入力して保存し、次に開いたときに表示する」ミニアプリを作ります。
<p>名前を入力してください</p>
<input id="nameInput" type="text">
<button id="saveButton">保存</button>
<p id="message"></p>
JavaScript で保存と読み込みを書く
const nameInputElement = document.getElementById("nameInput");
const saveButtonElement = document.getElementById("saveButton");
const messageElement = document.getElementById("message");
saveButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
localStorage.setItem("savedName", name);
messageElement.textContent = `保存しました：${name}`;
});
ここまでで、「ボタンを押したときに localStorage に保存する」処理ができました。
でも、これだけだと「次にページを開いたとき」に何も起きません。
そこで、「ページ読み込み時に localStorage から読み込む」処理を追加します。
const savedName = localStorage.getItem("savedName");
if (savedName !== null) {
messageElement.textContent = `前回の名前：${savedName}`;
nameInputElement.value = savedName;
}
この読み込み処理は、スクリプトの一番上（イベント登録の前）に書いておくと自然です。
重要ポイント：すべて「文字列」として保存される
数字も真偽値も、保存するときは文字列になる
localStorage は、内部的には「文字列しか持てない箱」です。
localStorage.setItem("count", 10);
と書いても、実際には “10” という文字列として保存されます。
const value = localStorage.getItem("count");
console.log(typeof value); // "string"
つまり、数字として使いたいときは、自分で Number に変換する必要があります。
const value = localStorage.getItem("count");
if (value !== null) {
const count = Number(value);
console.log(count + 1);
}
ここを理解していないと、「足し算したら文字列結合になってしまった」という事故が起きます。
“10” + 1 → “101”（文字列結合）
10 + 1 → 11（数値の足し算）
localStorage から取り出した値は、必ず型を意識して扱う、という癖をつけてください。
例題：カウンターを保存する
HTML を用意する
<p>ボタンを押した回数：</p>
<p id="countDisplay">0</p>
<button id="countButton">カウントアップ</button>
JavaScript で「保存されるカウンター」を作る
const countDisplayElement = document.getElementById("countDisplay");
const countButtonElement = document.getElementById("countButton");
let count = 0;
const savedCount = localStorage.getItem("clickCount");
if (savedCount !== null) {
count = Number(savedCount);
countDisplayElement.textContent = count;
}
countButtonElement.addEventListener("click", () => {
count += 1;
countDisplayElement.textContent = count;
localStorage.setItem("clickCount", String(count));
});
ここでの重要ポイントは二つです。
保存されている値を Number に変換してから使っている
保存するときは String(count) として文字列にしている（実際は自動で文字列になるが、意識しておくとよい）
「ページをリロードしてもカウントが続いている」という体験ができたら、
localStorage の威力を実感できるはずです。
removeItem と clear でデータを消す
特定のキーだけ消す／全部消す
保存したデータを消したくなる場面もあります。
特定のキーだけ消したいときは removeItem を使います。
localStorage.removeItem("savedName");
localStorage に入っているものを全部消したいときは clear です。
localStorage.clear();
注意点として、clear は「そのサイトの localStorage を全部消す」ので、
他のデータもまとめて消えてしまいます。
実際のアプリでは、基本的には removeItem を使うことが多いです。
セキュリティと localStorage の注意点（前半版）
「なんでもかんでも保存していい場所ではない」
localStorage は便利ですが、
セキュリティの観点から「保存してはいけないもの」もあります。
パスワードそのもの
クレジットカード番号
認証トークン（本番では基本 NG）
localStorage の中身は、同じブラウザ・同じユーザーなら簡単に見られます。
開発者ツールを開けば誰でも確認できるので、
「見られて困るもの」は絶対に保存しない、という意識が大事です。
前半では「便利さ」を中心に触りましたが、
後半ではもう少し踏み込んで、
オブジェクトを保存する方法（JSON）や、
セキュリティ上の考え方も絡めていきます。
Day20 前半のミニサンプル
名前＋カウンターを両方保存する小さなページ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day20 localStorage 前半</title>
</head>
<body>
<h1>localStorage 入門</h1>
<h2>名前の保存</h2>
<p>名前を入力してください</p>
<input id="nameInput" type="text">
<button id="saveNameButton">名前を保存</button>
<p id="nameMessage"></p>
<h2>カウンター</h2>
<p>ボタンを押した回数：</p>
<p id="countDisplay">0</p>
<button id="countButton">カウントアップ</button>
<script>
const nameInputElement = document.getElementById("nameInput");
const saveNameButtonElement = document.getElementById("saveNameButton");
const nameMessageElement = document.getElementById("nameMessage");
const savedName = localStorage.getItem("savedName");
if (savedName !== null) {
nameMessageElement.textContent = `前回の名前：${savedName}`;
nameInputElement.value = savedName;
}
saveNameButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
if (name === "") {
nameMessageElement.textContent = "名前を入力してください。";
return;
}
localStorage.setItem("savedName", name);
nameMessageElement.textContent = `保存しました：${name}`;
});
const countDisplayElement = document.getElementById("countDisplay");
const countButtonElement = document.getElementById("countButton");
let count = 0;
const savedCount = localStorage.getItem("clickCount");
if (savedCount !== null) {
count = Number(savedCount);
countDisplayElement.textContent = count;
}
countButtonElement.addEventListener("click", () => {
count += 1;
countDisplayElement.textContent = count;
localStorage.setItem("clickCount", String(count));
});
</script>
</body>
</html>
ここまで動かせたら、
「ブラウザにデータを保存する」という感覚はかなり掴めています。
Day20 前半のまとめ
前半で押さえたのは、localStorage の一番大事な基礎です。
キーと値で保存する（setItem / getItem）
すべて文字列として保存される
ページをリロードしてもデータが残る
removeItem / clear で削除できる
保存してはいけないデータもある（セキュリティ意識）
後半では、
オブジェクトや配列を JSON で保存する方法
簡単な「設定保存」や「ToDoリスト」への応用
localStorage を使うときの設計のコツ
などに踏み込んでいきます。