JavaScriptを学習中です。ログインフォームを作っていて、「次に来たときもメールアドレスが入ったままにしたい」と思い、localStorage を使ってみました。使い方と、ハマった点・やってはいけない点をまとめます。
localStorage とは
ブラウザにデータを保存できる仕組みです。特徴はこの3つ。
-
キーと値のセットで保存する（
setItem("キー", "値")） - ブラウザを閉じても消えない（次に開いても残っている）
- 保存できるのは文字列だけ
使うフォーム（HTML）
メールアドレスとパスワードのログインフォームを例にします。
<form class="form">
<label for="email">メールアドレス</label>
<input type="email" id="email">
<label for="password">パスワード</label>
<input type="password" id="password">
<button type="submit">ログイン</button>
</form>
保存する：setItem
送信されたら入力値を localStorage に保存します。フォーム送信のデフォルト動作（ページ再読み込み）を止めるため preventDefault() も入れます。
const form = document.querySelector(".form");
form.addEventListener("submit", (event) => {
event.preventDefault();
const email = document.querySelector("#email").value;
localStorage.setItem("email", email); // "email" というキーで保存
});
復元する：getItem
ページを開いたときに、保存済みの値があれば input に入れ直します。
const savedEmail = localStorage.getItem("email");
if (savedEmail) {
document.querySelector("#email").value = savedEmail;
}
これで、一度入れたメールアドレスが、次にページを開いたときも入ったままになります。
つまずき：保存できるのは「文字列」だけ
localStorage は文字列しか保存できません。数値を入れても文字列になって返ってきます。
localStorage.setItem("count", 5);
console.log(localStorage.getItem("count")); // "5"（文字列）
オブジェクトや配列をそのまま入れると "[object Object]" という謎の文字列になって壊れます。オブジェクトを保存したいときは JSON.stringify で文字列にして保存し、取り出すときに JSON.parse で戻します。
const user = { name: "taro", age: 20 };
localStorage.setItem("user", JSON.stringify(user)); // 文字列にして保存
const saved = JSON.parse(localStorage.getItem("user")); // オブジェクトに戻す
大事な注意：パスワードなどの機密情報は保存しない
localStorage は便利ですが、保存した内容はブラウザの開発者ツールから誰でも丸見えです。暗号化もされません。なので、
- ✅ 保存してよい：メールアドレス、表示テーマ、入力中の下書きなど
- ❌ 保存してはいけない：パスワード、クレジットカード番号などの機密情報
最初はパスワードも一緒に保存していたのですが、「localStorage は誰でも見られる」と知ってやめました。ログイン状態の記憶みたいな仕組みは、本来はもっと安全な方法（サーバー側のセッションなど）で行うものだと学びました。
まとめ
-
setItem("キー", 値)で保存、getItem("キー")で取り出す - ブラウザを閉じても残る
- 保存できるのは文字列だけ。オブジェクトは
JSON.stringify/JSON.parseを使う - パスワードなどの機密情報は保存しない
まだ学習中の身なので、誤りや、もっと良い書き方があればコメントで教えていただけると嬉しいです。最後まで読んでいただきありがとうございました。