La API de almacenamiento web proporciona mecanismos mediante los cuales los navegadores pueden almacenar pares clave/valor de una manera mucho más intuitiva que el uso de cookies. Los dos mecanismos dentro del almacenamiento web son sessionStorage y localStorage , la sesión almacena datos solo para una sesión hasta que se cierra el navegador, el almacenamiento local hace lo mismo pero persiste incluso cuando el navegador se cierra y se vuelve a abrir, por lo que se recomienda usar el almacenamiento local. para formularios de autocompletado.
Ahora los desarrolladores tienen dos enfoques posibles para crear formularios de autocompletar.
- Usar datos fijos almacenados localmente
- Usar datos almacenados dinámicamente
Nota: Los datos almacenados dinámicamente son los que se actualizan de vez en cuando, según las entradas del usuario, como el envío de un formulario.
Enfoque 1: los datos se almacenan localmente en el navegador usando window.localStorage.setItem (clave, valor) y luego se recuperan en una etiqueta de secuencia de comandos y se usan para autocompletar formularios.
Ejemplo: supongamos un caso del campo de entrada «país» y uno necesita completar automáticamente el campo del país usando la propiedad HTML localStorage . El siguiente código se implementa para obtener y completar automáticamente los campos del país en el formulario dado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>
<script>
// Ready function runs everytime the page load
$(document).ready(function() {
// Set local storage
var Countries = [
"Afghanistan", "Albania", "Algeria",
"Armenia", "Australia", "Bahrain",
"Bangladesh", "Belgium", "Bhutan",
"Brazil", "Canada", "Chile", "China",
"Denmark", "Djibouti", "Egypt",
"Estonia", "Ethiopia", "Finland",
"France", "Germany", "Ghana", "Greece",
"Greenland", "Hong Kong", "Hungary",
"Iceland", "India", "Indonesia", "Iran",
"Iraq", "Ireland", "Israel", "Italy",
"Japan", "Jersey", "Jordan", "Kazakhstan",
"Kuwait", "Kyrgyzstan", "Lebanon",
"Malaysia", "Maldives", "Mexico", "Nepal",
"Netherlands", "New Zealand", "North Korea",
"Pakistan", "Palestine", "Philippines",
"Poland", "Qatar", "Russia", "Saudi Arabia",
"Singapore", "South Africa", "Swaziland",
"Taiwan", "Thailand", "Turkey",
"United Kingdom", "United States of America",
"Uruguay", "Vietnam", "Yemen", "Zimbabwe"
];
// Fetch locally stored Countries
var Countries = window.localStorage.getItem("Countries");
// Convert it to a javascript object
Countries = JSON.parse(Countries);
// Fetch Country input tag and use JQuery
// autocomplete function
$("#country_input").autocomplete({
// Pass javascript object to
// autocomplete function
source: Countries,
autofocus: true,
});
// To clear local storage when clear
// button is clicked
$("#clear").click(function(event) {
localStorage.clear();
});
});
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>Autofilling forms </b>
<form name="form" id="form">
<label for="">Enter Country</label>
<input type="text" id="country_input"
name="country_input" />
<button type="submit">Submit</button>
<button id="clear">Clear Local</button>
</form>
</body>
</html>
Salida: una desventaja de este enfoque es que se necesita almacenar varios datos localmente a la vez, lo que consume memoria y es posible que muchos de estos datos nunca se utilicen. En tales casos, el almacenamiento dinámico de datos puede ayudar a almacenar valores con frecuencia, lo que reduce la memoria y en casos en los que los valores no se pueden predefinir.
función de autocompletar
Enfoque 2: en este enfoque, los desarrolladores almacenan datos de campo de formulario de entrada localmente y actualizan los valores almacenados localmente para cada envío de formulario. Durante este proceso, las entradas duplicadas se verifican y solo se almacenan una vez. El desarrollador puede elegir la cantidad de valores que deben estar presentes en el almacenamiento local.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>
<script>
// This function runs everytime the page load
$(document).ready(function() {
var Countries = [
"Afghanistan", "Albania", "Algeria",
"Armenia", "Australia", "Bahrain",
"Bangladesh", "Belgium", "Bhutan",
"Brazil", "Canada", "Chile", "China",
"Denmark", "Djibouti", "Egypt",
"Estonia", "Ethiopia", "Finland",
"France", "Germany", "Ghana", "Greece",
"Greenland", "Hong Kong", "Hungary",
"Iceland", "India", "Indonesia", "Iran",
"Iraq", "Ireland", "Israel", "Italy",
"Japan", "Jersey", "Jordan", "Kazakhstan",
"Kuwait", "Kyrgyzstan", "Lebanon",
"Malaysia", "Maldives", "Mexico", "Nepal",
"Netherlands", "New Zealand", "North Korea",
"Pakistan", "Palestine", "Philippines",
"Poland", "Qatar", "Russia", "Saudi Arabia",
"Singapore", "South Africa", "Swaziland",
"Taiwan", "Thailand", "Turkey",
"United Kingdom", "United States of America",
"Uruguay", "Vietnam", "Yemen", "Zimbabwe"
];
// Fetch locally stored Countries
var Countries = window.localStorage.getItem("Countries");
// If countries is not available assign empty array []
// else assign JavaScript object
Countries = Countries === null ? [] : JSON.parse(Countries);
// Fetch Country input tag and use jQuery
// autocomplete function
$("#country_input").autocomplete({
// Pass JavaScript object to
// autocomplete function
source: Countries,
autofocus: true,
});
// Form submission event function
$("form").submit(function(event) {
// Prevent form submission until
// code execution
event.preventDefault;
// Fetch input field value
var currentCountry = $("#country_input").val();
// Store it on the top of the Countries
// array at index 0
Countries.unshift(currentCountry);
// Remove the duplicate entries
for (var i = 1; i < Countries.length; i++) {
// Countries[0] stores current input field
if (Countries[0] === Countries[i]) {
Countries.splice(i, 1);
}
}
// Stores only the last 10 searches
// Developer can choose the number of
// entries to be stored
if (i === Countries.length && Countries.length > 10) {
Countries.pop();
}
// Stores the new list into the local
// storage overwriting the previous one
window.localStorage.setItem("Countries",
JSON.stringify(Countries));
// Submit the form
event.submit;
});
// To clear local storage when clear
// button is clicked
$("#clear").click(function(event) {
localStorage.clear();
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<b>Autocomplete filling</b>
<p></p>
<form name="form" id="form">
<label for="">Enter Country</label>
<input type="text" id="country_input"
name="country_input" />
<button type="submit">Submit</button>
<button id="clear">Clear Local</button>
</form>
</body>
</html>
Producción:
autocompletar
Publicación traducida automáticamente
Artículo escrito por kdsinghcoder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA