localStorageでフォームの入力内容を自動保存する方法｜JavaScriptで離脱防止対策！

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

長いお問い合わせフォームやアンケートフォームを記入中に、うっかりページを閉じてしまった…
あるいは、リロードしたらすべて白紙に戻ってしまった…

そんな経験、ありませんか？

フォーム離脱の原因のひとつに、「入力データの消失」があります。
せっかく書いた内容が消えてしまえば、ユーザーはストレスを感じ戻ってきてくれません。

そこで今回ご紹介するのが、JavaScriptの localStorage を活用して、フォームの入力状態をブラウザに一時保存する方法です。

特別なライブラリは不要で、数行のコードだけで実装可能！
ユーザビリティ向上や離脱防止に大きく貢献するこのテクニック、ぜひあなたのサイトにも取り入れてみてください。

localStorageとは？

localStorage は、ブラウザにデータを保存できるWeb Storage APIのひとつです。
以下のような特徴があります。

今回は、この localStorage にフォームの内容を保存しておき、ページを再訪したときに自動復元させる仕組みを作ります。

実際のデモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

実装ステップ①：HTMLでフォームを作成

まずは基本となるフォームを用意します。

<form id="contactForm">
  <div class="box">
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name">
  </div>
  <div class="box">
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email">
  </div>
  <div class="box">
  <label for="message">お問い合わせ内容：</label>
  <textarea id="message" name="message"></textarea>
</div>
  <button type="submit">送信</button>
</form>

実装ステップ②：JavaScriptで保存と復元を実装

保存処理（リアルタイムで更新）

const form = document.getElementById("contactForm");

form.addEventListener("input", () => {
  const formData = {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value
  };
  localStorage.setItem("contactFormData", JSON.stringify(formData));
});

復元処理（ページ読み込み時）

window.addEventListener("DOMContentLoaded", () => {
  const saved = localStorage.getItem("contactFormData");
  if (saved) {
    const data = JSON.parse(saved);
    form.name.value = data.name || "";
    form.email.value = data.email || "";
    form.message.value = data.message || "";
  }
});

実装ステップ③：送信後はデータをクリアしよう

送信ボタンを押したあと、保存されたデータを消す処理も忘れずに。

form.addEventListener("submit", () => {
  localStorage.removeItem("contactFormData");
});

これを入れておくことで、送信後の再訪時に古いデータが表示されるのを防げます。

応用アイデア：確認ページへの遷移でも有効

注意点：個人情報・セキュリティ

localStorage はユーザーのブラウザに保存されるため、セキュリティ面に配慮が必要です。

まとめ

フォームの入力状態を一時的に保存することで、ユーザーの離脱防止や利便性アップが期待できます！
特に、長文の問い合わせフォームやアンケート、問い合わせ途中でページを離れてしまいがちなユーザーが多いサイトには非常に効果的です!

JavaScriptと localStorage の組み合わせで、次のような恩恵が得られます。

ぜひ、あなたのWebサイトでも取り入れて、ユーザーに優しいフォーム設計を実現してみてくださいね！

satokotadesignキャンペーン実施中！