JavaScriptを使用してフォームデータの自動保存機能を実現するにはどうすればよいですか?

JavaScriptを使用してフォームデータの自動保存機能を実現するにはどうすればよいですか?

Web サイト開発では、フォームは頻繁に使用される要素であり、ユーザーが入力したフォーム データの保存は重要な機能要件です。ユーザーがフォームに入力するときに、誤ってページを更新したり、ブラウザを閉じたり、誤ってインターネットから切断したりすると、以前に入力したデータが失われ、ユーザー エクスペリエンスにとって好ましくありません。この問題を解決するには、JavaScript を使用してフォーム データの自動保存機能を実装し、ユーザーが入力したデータをある程度保護することができます。

以下は、localStorage オブジェクトを使用してフォームデータの自動保存機能を実装し、データを保存するメソッドです。

まず、フォームの各入力要素 (input、textarea など) にイベント リスナーを追加し、ユーザーが入力したときにデータを localStorage に保存します。コードは次のとおりです。

// 为表单元素添加事件监听
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input, textarea');

inputs.forEach(input => {
  input.addEventListener('input', saveFormData);
});

// 保存表单数据到 localStorage
function saveFormData() {
  const formData = {};

  inputs.forEach(input => {
    formData[input.id] = input.value;
  });

  localStorage.setItem('formData', JSON.stringify(formData));
}

次に、ページが読み込まれるときに、フォーム データが localStorage に保存されているかどうかを確認し、保存されている場合はフォームにデータを入力する必要があります。コードは次のとおりです。

// 检查 localStorage 中是否保存了表单数据
window.addEventListener('DOMContentLoaded', () => {
  const formData = localStorage.getItem('formData');

  if (formData) {
    const savedData = JSON.parse(formData);

    inputs.forEach(input => {
      const id = input.id;
      input.value = savedData[id] || '';
    });
  }
});

最後に、ユーザーがフォームを送信したときに localStorage 内のデータをクリアして、次回ユーザーがページにアクセスしたときにフォームが空白になるようにする必要もあります。コードは次のとおりです。

// 清除 localStorage 中保存的表单数据
form.addEventListener('submit', () => {
  localStorage.removeItem('formData');
});

上記のコードにより、ユーザーがフォームにデータを入力すると、データは自動的に localStorage に保存されます。ユーザーがページを更新するか、ブラウザを閉じるか、ページを再度開くときに、以前に入力したデータが送信されていない場合は、ユーザーが再度ページにアクセスしたときに、以前に入力したコンテンツがフォームに表示されます。

なお、localStorageはドメイン名単位で保存されているため、同じドメイン名の他のページでもlocalStorageのデータを読み込むことでデータを共有することができます。

上記はJavaScriptを使用してフォームデータの自動保存機能を実現するコード例です。この記事がお役に立てば幸いです!

以上がJavaScriptを使用してフォームデータの自動保存機能を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。