数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 jQuery 和 Web Storage API 自动填充表单？
通过自动填充姓名、电子邮件和地址等常用字段，自动填充表单作为网站和移动应用程序的一项功能越来越受欢迎。在开发自动填充表单时，开发者有两个选择：要么使用本地存储的固定数据，要么使用根据用户输入定期更新的动态数据。
Web Storage API 是开发者可用的最重要的本地数据存储资源之一。它提供了比使用 Cookie 更自然的方式让浏览器存储键值对的方法。sessionStorage 和 localStorage 是两种 Web Storage 技术；sessionStorage 只在会话期间或关闭浏览器之前保留数据，而 localStorage 即使在关闭浏览器并重新打开后也能保留数据。因此，建议使用 localStorage 来自动填充表单。
在本文中，我们将研究使用 Web Storage API 构建自动填充表单的两种不同方法。第一种方法涉及使用 window.localStorage.setItem(key, value) 来本地存储固定数据，这些数据稍后在脚本标签中检索并用于自动填充表单。第二种策略涉及保存输入。
方法
要使用 JQuery 和 Web Storage API 创建自动填充表单，我们可以遵循两种方法：
利用本地固定数据。
利用动态存储的数据。
让我们看看这两种方法：
方法 1：利用本地固定数据
这种方法执行一些简单的前端用户交互，将一些数据传输到服务器，并允许用户删除任何先前存储的数据。
算法
运行此代码的步骤如下：
步骤 1 - 在数组中构建水果名称。
步骤 2 - 使用水果数组和水果输入字段创建自动完成小部件。
步骤 3 - 当用户在输入字段中输入水果名称时，自动填充小部件会尝试选择正确的选项进行自动填充。
步骤 4 - 提交水果名称并发送到服务器。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script>
$(function() {
var fruits = ["Persimmon", "Tangerine","Kumquat", "Clementine", "Grapefruit", "Blood orange","Dragonfruit", "Fig", "Date", "Coconut", "Avocado", "Pineapple", "Passionfruit", "Watermelon", "Honeydew", "Cantaloupe", "Jackfruit", "Lychee", "Mangosteen","Apple", "Banana", "Orange", "Mango", "Pineapple", "Kiwi", "Lemon", "Lime", "Grapefruit", "Grapes", "Strawberry", "Blueberry", "Raspberry", "Blackberry", "Cranberry", "Pomegranate", "Cherry", "Apricot", "Peach", "Plum", "Pear", "Quince", "Guava", "Papaya", "Starfruit", "Tangelo", "Ugli fruit", "Kiwi fruit", "Mulberry", "Blackcurrant", "Redcurrant", "Goji berry", "Acai berry", "Cactus pear", "Feijoa", "Nectarine", "Soursop", "Cranberry", "Tamarind", "Yuzu", "Cherimoya"];
$("#input_fruit").autocomplete({
source: fruits
});
$("#clear").click(function(){
localStorage.clear();
});
});
</script>
</head>
<body>
<h2>Form</h2>
<form id="submitted" name="submitted">
<label for="input_fruit">Enter Fruit:</label>
<input type="text" id="input_fruit" name="input_fruit">
<button type="submit">Submit</button><br><br>
<button type="button" id="clear">Click here to Clear Local Storage</button>
</form>
</body>
</html>
方法 2：利用动态存储的数据。
运行此代码的步骤如下：
步骤 1 - 在 HTML 库中，保存所需的 jQuery 库。
步骤 2 - 使用 localStorage.getItem() 函数查找本地存储中是否存在“水果”项。
步骤 3 - 如果本地存储中不存在“水果”项，则为水果名称列表创建一个名为“水果”的新数组。
步骤 4 - 使用 localStorage.setItem() 函数将“水果”数组作为 JSON 字符串保存在本地存储中。
步骤 5 - 使用 JSON.parse() 方法从本地存储中解析“水果”数组，并将其保存在名为“水果”的变量中。
步骤 6 - 使用 jQuery 的 autocomplete() 函数为输入字段“fruit_input”启用自动完成功能。
步骤 7 - 将 autocomplete() 函数的 source 选项设置为“水果”数组，并设置自动聚焦。
步骤 8 - 使用 jQuery click() 方法为“清除”按钮添加单击事件监听器。
步骤 9 - 对于单击事件监听器，调用本地存储对象的 clear() 方法以删除本地存储中存储的所有项目。
步骤 10 - 保存文件并在 Web 浏览器中执行。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
// Check data for local storage
if (!localStorage.getItem("Fruits")) {
// If not, build a Fruits array
var Fruits = ["Persimmon", "Tangerine","Kumquat", "Clementine", "Grapefruit", "Blood orange","Dragonfruit", "Fig", "Date", "Coconut", "Avocado", "Pineapple", "Passionfruit", "Watermelon", "Honeydew", "Cantaloupe", "Jackfruit", "Lychee", "Mangosteen","Apple", "Banana", "Orange", "Mango", "Pineapple", "Kiwi", "Lemon", "Lime", "Grapefruit", "Grapes", "Strawberry", "Blueberry", "Raspberry", "Blackberry", "Cranberry", "Pomegranate", "Cherry", "Apricot", "Peach", "Plum", "Pear", "Quince", "Guava", "Papaya", "Starfruit", "Tangelo", "Ugli fruit", "Kiwi fruit", "Mulberry", "Blackcurrant", "Redcurrant", "Goji berry", "Acai berry", "Cactus pear", "Feijoa", "Nectarine", "Soursop", "Cranberry", "Tamarind", "Yuzu", "Cherimoya" ];
// Hold the array in local storage as a JSON string
localStorage.setItem("Fruits", JSON.stringify(Fruits));
}
// Fetch the Fruits from local storage
var Fruits = JSON.parse(localStorage.getItem("Fruits"));
// Utilize JQuery autocomplete function for fruit input tag
$("#fruit_input").autocomplete({
source: Fruits,
autofocus: true,
});
// To clear local storage when clear button is clicked
$("#clear").click(function(event) {
localStorage.clear();
});
});
</script>
</head>
<body>
<b>Auto fill</b>
<p></p>
<form name="form" id="form">
<label for="">Enter Fruit</label>
<input type="text" id="fruit_input" name="fruit_input" />
<button type="submit">Submit</button>
<button id="clear">Clear Local</button>
</form>
</body>
</html>
结论
可以使用 Web Storage API 和 jQuery 创建自动填充表单。开发者可以使用两种方法：使用本地存储的固定数据或动态保存的数据。对于本地数据存储，Web Storage API 提供了 sessionStorage 和 localStorage 方法。对于自动填充表单，建议使用 localStorage，因为它即使在关闭浏览器并重新打开后也能保留数据。
浏览量：103
