JavaScript 自动保存输入

在 Web 开发中，用户在表单中输入的数据通常需要进行保存，以便在页面刷新或重新加载后保持输入内容。为了实现自动保存输入的功能，我们可以使用 JavaScript。

实现思路

要实现自动保存输入的功能，我们可以通过以下步骤来实现：

1. 监听用户在表单中的输入事件。
2. 在输入事件发生时，获取用户输入的内容。
3. 使用浏览器提供的存储机制（如 LocalStorage）将输入内容保存起来。
4. 在页面加载时，检查是否存在已保存的输入内容，并将其还原到表单中。

示例代码

下面是一个示例代码，用于实现自动保存输入的功能：

// 获取表单元素
const form = document.querySelector('#myForm');

// 监听输入事件
form.addEventListener('input', (event) => {
  const input = event.target;
  const value = input.value;

  // 使用 LocalStorage 保存输入内容
  localStorage.setItem('inputValue', value);
});

// 在页面加载时，检查是否存在已保存的输入内容
window.addEventListener('load', () => {
  const savedValue = localStorage.getItem('inputValue');

  if (savedValue) {
    // 还原保存的输入内容到表单中
    form.querySelector('input').value = savedValue;
  }
});

注意事项

• 这个示例中使用了 LocalStorage 来保存输入内容，如果你需要更复杂的功能，例如同时保存多个输入，你可以选择其他存储机制，如 IndexedDB 或后端数据库。
• 为了简单起见，示例代码仅处理了文本输入框的内容保存和还原，如果你的表单包含其他类型的输入元素（如复选框或下拉框），你需要根据具体情况进行适当修改。

希望以上内容能够帮助你实现 JavaScript 自动保存输入的功能。