Webアプリで入力内容や設定状態を保存し、次回の訪問時にも同じ状態を保ちたい場合、ローカルストレージ（localStorage）を活用することで簡単に実現できます。この記事では、JavaScriptでローカルストレージにデータを保存し、ページ読み込み時にそれを自動で反映させる方法を解説します。
ローカルストレージとは？
ローカルストレージはブラウザに用意されたストレージ領域で、ドメイン単位で最大5MB程度のデータを永続的に保存できます。セッションストレージと違い、ページを閉じてもデータは保持され続けます。
入力内容をローカルストレージに保存する例
以下は、テキスト入力欄に入力された内容をローカルストレージに保存し、次回ページを開いた際に自動的に入力欄に反映させる例です。
<input type="text" id="username" placeholder="ユーザー名を入力">
<button id="saveBtn">保存</button>document.addEventListener('DOMContentLoaded', function () {
const input = document.getElementById('username');
const saveBtn = document.getElementById('saveBtn');
// 保存されたデータがあれば反映
const savedName = localStorage.getItem('username');
if (savedName) {
input.value = savedName;
}
// ボタン押下で保存
saveBtn.addEventListener('click', function () {
localStorage.setItem('username', input.value);
});
});このコードでは、ボタンがクリックされたときに現在の入力値をlocalStorage.setItem()で保存しています。そしてDOMContentLoadedイベントで、保存されたデータがあればinput.valueにセットして初期状態に反映しています。
チェックボックスやラジオボタンにも対応可能
テキストだけでなく、チェックボックスやラジオボタンなどの状態も保存できます。以下はチェックボックスの状態を保存・復元する例です。
<label><input type="checkbox" id="subscribe"> メールを受け取る</label>document.addEventListener('DOMContentLoaded', function () {
const checkbox = document.getElementById('subscribe');
// 状態を復元
const saved = localStorage.getItem('subscribe');
if (saved === 'true') {
checkbox.checked = true;
}
// 状態を保存
checkbox.addEventListener('change', function () {
localStorage.setItem('subscribe', checkbox.checked);
});
});このようにcheckedプロパティを保存・取得することで、ユーザーの選択状態を保持できます。
保存したデータの削除
不要になったローカルストレージのデータはremoveItemやclearで削除できます。
localStorage.removeItem('username'); // 特定のキーを削除
localStorage.clear(); // すべてのローカルストレージデータを削除まとめ
ローカルストレージは、ユーザーの設定や入力状態を保持するのに便利な仕組みです。今回紹介したように、setItemとgetItemを活用すれば、ページの初期化時に保存されたデータを簡単に反映できます。フォームの入力補助やUIのカスタマイズ保存など、幅広い用途で活用してみてください。
