HTML 表单在输入时未提交 - JavaScript

在 Web 开发领域，HTML 表单是经常使用的工具。用户在其中输入数据，然后提交表单以便进行处理（通常是发送到服务器）。但是，在某些情况下，用户可能不想提交表单，而是希望将部分信息保存在本地并在稍后继续填写。这时，就需要使用 JavaScript 来管理表单数据。

技术方案

为了在表单输入时未提交的情况下保存表单数据，我们可以使用以下技术方案：

方案一：使用 localStorage

我们可以使用 localStorage API 将表单数据保存在浏览器本地存储中。当用户重新加载页面时，我们可以使用 JavaScript 将此数据恢复到表单中，让用户继续填写。

// 保存表单数据
function saveFormData() {
  var formData = {};
  formData.name = document.getElementById("name").value;
  formData.email = document.getElementById("email").value;
  localStorage.setItem("formData", JSON.stringify(formData));
}

// 恢复表单数据
function restoreFormData() {
  var formData = JSON.parse(localStorage.getItem("formData"));
  if (formData) {
    document.getElementById("name").value = formData.name;
    document.getElementById("email").value = formData.email;
  }
}

// 页面加载后恢复表单数据
window.onload = function() {
  restoreFormData();
};

// 当表单输入时保存表单数据
document.getElementById("name").addEventListener("input", saveFormData);
document.getElementById("email").addEventListener("input", saveFormData);

方案二：使用 cookie

与 localStorage 类似，我们可以使用 cookie API 将表单数据保存在浏览器 cookie 中。当用户重新加载页面时，我们可以使用 JavaScript 将此数据恢复到表单中，让用户继续填写。

// 保存表单数据
function saveFormData() {
  document.cookie =
    "name=" + encodeURIComponent(document.getElementById("name").value);
  document.cookie =
    "email=" +
    encodeURIComponent(document.getElementById("email").value) +
    "; path=/"; // 设定 cookie 的 scope 为全站
}

// 获取 cookie 值
function getCookie(name) {
  var cookieArr = document.cookie.split("; ");
  for (var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if (name === cookiePair[0]) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

// 恢复表单数据
function restoreFormData() {
  var name = getCookie("name");
  if (name !== null) {
    document.getElementById("name").value = name;
  }
  var email = getCookie("email");
  if (email !== null) {
    document.getElementById("email").value = email;
  }
}

// 页面加载后恢复表单数据
window.onload = function() {
  restoreFormData();
};

// 当表单输入时保存表单数据
document.getElementById("name").addEventListener("input", saveFormData);
document.getElementById("email").addEventListener("input", saveFormData);

总结

以上是两种保存表单数据的方案。无论哪种方案，都需要注意以下几点：

• 在恢复表单数据时，需要检查保存的数据是否过时或者不正确，在恢复数据之前我们需要进行一些数据校验。
• 在保存表单数据时，需要对敏感信息（如用户名和密码）进行加密处理以便于安全性保证。
• 如果保存表单数据是因为用户意外关闭了页面，那么我们可以在用户下次重新访问页面时主动询问他是否要恢复上次未完成的表单。

注：以上方案均有空间限制，使用时请注意。