如何使用 jQuery 和 Web Storage API 制作自动填充表单？

在许多网站中，我们可能需要填写各种表单。如果我们经常使用同一个表单，就可以使用自动填充来简化这个过程。本文将介绍如何使用 jQuery 和 Web Storage API 制作自动填充表单的方法。

什么是 Web Storage API？

在 Web 应用程序中，我们会经常需要存储数据。Web Storage API 是一组浏览器提供的 API，用于在浏览器中存储数据。Web Storage API 提供了两个对象：

• sessionStorage：仅在当前会话（当前浏览器窗口或标签页）有效，关闭窗口或标签页后数据将被删除。
• localStorage：在所有同源窗口或标签页中都有效，并且即使关闭窗口或标签页也不会被删除。

这些对象可以存储字符串类型的数据。

使用 Web Storage API 自动填充表单

有时，为了方便用户，我们需要将一些表单字段预先填入。使用 Web Storage API，我们可以将这些数据存储在 sessionStorage 或 localStorage 中，并在下次打开表单时自动填充。

这里的示例应用程序演示了如何使用 jQuery 和 Web Storage API 自动填充表单。

HTML

<form>
  <div>
    <label for="name">名称：</label>
    <input type="text" name="name" id="name" />
  </div>
  <div>
    <label for="email">邮箱地址：</label>
    <input type="email" name="email" id="email" />
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" />
  </div>
  <div>
    <input type="checkbox" name="remember-me" id="remember-me" />
    <label for="remember-me">记住我</label>
  </div>
  <button type="submit">提交</button>
</form>

JavaScript

$(function() {
  // 检查浏览器是否支持 Web Storage API
  if (typeof Storage !== "undefined") {
    var name = $("#name"),
        email = $("#email"),
        password = $("#password"),
        rememberMe = $("#remember-me");

    // 获取存储在 localStorage 中的数据，如果有
    name.val(localStorage.name || "");
    email.val(localStorage.email || "");
    password.val(localStorage.password || "");
    rememberMe.prop("checked", localStorage.rememberMe === "true");

    // 在提交表单时存储表单数据
    $("form").submit(function() {
      if (rememberMe.prop("checked")) {
        localStorage.name = name.val();
        localStorage.email = email.val();
        localStorage.password = password.val();
        localStorage.rememberMe = rememberMe.prop("checked");
      } else {
        localStorage.removeItem("name");
        localStorage.removeItem("email");
        localStorage.removeItem("password");
        localStorage.removeItem("rememberMe");
      }
    });
  } else {
    alert(
      "您的浏览器不支持 Web Storage API，请升级您的浏览器或使用其他浏览器。"
    );
  }
});

解释

• 首先，我们检查浏览器是否支持 Web Storage API。如果不支持，则提示用户升级或更换浏览器。
• 然后，我们获取表单字段的 jQuery 对象。
• 接着，我们从 localStorage 中获取存储的值（如果有），并将它们设置为表单字段的值。
• 最后，当用户提交表单时，我们将表单数据存储到 localStorage 中，并根据“记住我”复选框的选中状态决定是否保存数据。

总结

使用 Web Storage API 和 jQuery，我们可以很容易地制作自动填充表单。只需将要存储的数据保存在 sessionStorage 或 localStorage 中，然后在下次打开表单时获取并自动填充即可。