Webアプリやフォームで、ユーザーが入力した内容がページをリロードすると消えてしまう経験はありませんか？
localStorage を使えば、入力中の内容をブラウザに一時保存して、次回アクセス時にも復元できます！
この記事では、JavaScriptでフォーム入力内容をローカルストレージに保存・復元する方法をわかりやすく解説します。
localStorageとは？
- ブラウザにキーと値でデータを保存できるWeb API
- 容量：約5MB程度
- サーバーとは無関係に、ローカル（端末）に保存
- 有効期限なし（手動で削除しない限り保存され続ける）
実装例：フォームに入力された内容を保存する
HTML例：
<form id="myForm">
<input type="text" id="name" placeholder="名前を入力">
<textarea id="memo" placeholder="メモ"></textarea>
</form>JavaScript：
// 入力値を保存
const saveToLocalStorage = () => {
localStorage.setItem('name', document.getElementById('name').value);
localStorage.setItem('memo', document.getElementById('memo').value);
};
// ロード時に値を復元
window.addEventListener('DOMContentLoaded', () => {
document.getElementById('name').value = localStorage.getItem('name') || '';
document.getElementById('memo').value = localStorage.getItem('memo') || '';
});
// 入力が変更されたら保存
document.getElementById('name').addEventListener('input', saveToLocalStorage);
document.getElementById('memo').addEventListener('input', saveToLocalStorage);応用：フォーム送信後にローカルストレージを削除
document.getElementById('myForm').addEventListener('submit', () => {
localStorage.removeItem('name');
localStorage.removeItem('memo');
});注意点と補足
- ローカルストレージには個人情報や機密データは保存しないでください。
- 他ユーザーと共有できない（端末ごとに保存）
- フォームが多い場合は、オブジェクト形式でまとめて保存する方法もおすすめ
まとめ
- localStorage を使えば、入力内容の保存・復元が非常に簡単
- フォームのUX改善に効果的
- 注意点を守って安全に使いましょう！
