📅 最后修改于: 2023-12-03 15:23:55.324000 🧑 作者: Mango
在网站开发中，表单是非常重要的组件，它们通常用于收集用户信息或进行用户交互。如果表单中的某些字段已知或是以前填写过，那么将这些值进行自动填充可以帮助用户更快地填写表单，并提高用户体验。本文将介绍如何使用 jQuery 和 Web Storage API 制作自动填充表单的功能。
Web Storage API 是 HTML5 中新增的存储 API，它可以让我们在客户端上存储键值对数据，而无需向服务器发送请求。Web Storage API 包含两个存储机制：sessionStorage 和 localStorage。它们都是作为全局对象 window 的属性存在的。我们可以使用它们存储和获取数据。
jQuery 是一个广泛使用的 JavaScript 库，它提供了方便的 API，使得 HTML 文档遍历、事件处理、动画效果、Ajax 交互等操作变得更加容易。在本文中，我们将使用 jQuery 来修改表单元素的值，并将表单值保存在 Web Storage 中。
首先，我们需要创建一个包含表单的 HTML 页面。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动填充表单</title>
</head>
<body>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<label for="tel">电话：</label>
<input type="tel" id="tel" name="tel">
<button type="submit">提交</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
上面的代码中，我们定义了一个包含姓名、邮箱和电话输入框的表单。表单包含一个提交按钮和两个引入的 JavaScript 文件：jQuery 和一个自定义的 app.js 文件，后者将包含我们的主要逻辑。
接下来，我们需要在 app.js 文件中实现自动填充表单的逻辑：
$(function() {
var storageKey = 'form-data';
// 获取表单元素
var nameField = $('#name');
var emailField = $('#email');
var telField = $('#tel');
// 获取存储的表单数据
var storedData = JSON.parse(localStorage.getItem(storageKey));
if (storedData) {
// 如果存储的数据存在，则使用它来填充表单
nameField.val(storedData.name || '');
emailField.val(storedData.email || '');
telField.val(storedData.tel || '');
}
// 保存表单数据
$('form').submit(function(event) {
event.preventDefault();
var formData = {
name: nameField.val(),
email: emailField.val(),
tel: telField.val()
};
localStorage.setItem(storageKey, JSON.stringify(formData));
});
});
上述代码中，我们使用了 jQuery 的 ready() 函数，确保 DOM 加载完成后再运行我们的代码。我们首先定义了一个 storageKey 常量，以便稍后保存和获取表单数据时使用。然后，我们获取了表单中的每个输入框元素，并定义了一个 storedData 变量，用于存储先前保存的表单数据。
如果存储的数据存在，我们将使用 jQuery 的 val() 函数将相应的数据填充到输入框中。否则，这些输入框将保持为空。
最后，我们使用了 jQuery 的 submit() 函数来捕获表单提交事件，并阻止浏览器默认的提交行为。然后，我们使用 val() 函数获取用户输入的值，并将这些值存储在一个 formData 对象中。最后，我们将 formData 对象保存在 localStorage 中，以便后续使用。
在本文中，我们介绍了如何使用 jQuery 和 Web Storage API 制作自动填充表单的功能。我们首先简要介绍了 Web Storage API 和 jQuery，然后演示了如何获取表单值、将其保存在客户端中，并在用户下次使用时自动填充表单。
总的来说，使用 Web Storage API 制作自动填充表单非常简单。只需几行代码就可以实现，而且能够提高用户体验。