Garlic.Js y Sisyphus.Js: estos complementos jQuery almacenan valores de formulario con HTML5 LocalStorage

Garlic.Js y Sisyphus.Js: estos complementos jQuery almacenan valores de formulario con HTML5 LocalStorage

El problema es tan antiguo como los formularios en la web. Cuanto más largo sea el formulario, mayor será el problema, potencialmente. El problema del que estoy hablando es uno con el que te has encontrado más de una vez en tu vida digital. Suele ocurrir solo después de completar los formularios más complejos o cuando tiene prisa y solo desea enviar este pedido que le prometió a su esposa que haría hoy. Ahí está. El envío falla, la pestaña del navegador se cierra accidentalmente, por alguna razón presionas F5 o lo que sea que logras realizar. Resultado: el formulario vuelve a estar vacío, has vuelto a cero. Los complementos para jQuery que tenemos para usted hoy prometen evitar encontrarse con una situación como esta nunca más.

Garlic.js y Sisyphus.js: guarde el contenido de su formulario en LocalStorage

Si ejecuta un sitio de comercio electrónico, es consciente del problema. Si los clientes potenciales tienen que completar formularios una y otra vez, lo más probable es que pierdan el deseo de comprar. En otras palabras: dejarán sus carritos de compras justo en el medio de su almacén y se dirigirán a la puerta. Este efecto no se limita a los compradores, por supuesto. Todos los ciudadanos de la red se habrán encontrado con el efecto de tener que completar este gran formulario una vez más, sé que tuve que hacerlo docenas de veces. No siempre se debe a la discapacidad de sus dedos. Los diseñadores web también tienen su parte justa. Garlic.js y Sisyphus.js, dos complementos relativamente nuevos para jQuery, prometen ser la solución. Si bien Sisyphus.js es el proyecto más antiguo y maduro, Garlic.js recibe mucha atención en estos días, ya que es completamente nuevo y está respaldado por un desarrollador ambicioso abierto a sugerencias y discusiones en general. El principio de funcionamiento de ambos complementos es idéntico. Ambos necesitan un navegador moderno en el lado del cliente, ya que hacen uso de la API localStorage de HTML5, esta pequeña técnica que le permite almacenar contenidos web localmente en su disco. No se implementan respaldos o puertos para navegadores menos modernos. Tendrías que codificarlos por tu cuenta. Puede encontrar un enfoque útil para IE 6/7 en los enlaces relacionados a este artículo. El uso básico es simple con ambos complementos. Después de haber incrustado el script en el encabezado de su HTML (por cierto, no se olvide de jQuery en sí), lo pone en práctica de la siguiente manera: Garlic.js:

El atributo de datos debe adjuntarse a cada formulario en el que desee que Garlic almacene los valores. Si tiene más de un formulario en una sola página, debe adjuntar el atributo a cada uno individualmente. Sisyphus.js funciona usando una llamada de función, no el tipo de atributo de datos:

$('#form1, #form2').sisyphus();

Como reconocerá fácilmente, Sisyphus le permite especificar varias formas en una sola llamada de función. Si desea cubrir todos los formularios en la página, la llamada es más simple:

$('form').sisyphus();

Sisyphus ofrece más opciones de personalización que Garlic. Con Sisyphus, incluso puede llamar a funciones dependiendo de los diferentes estados de los campos de su formulario. Sin embargo, Sisyphus ofrece más funcionalidad No se apresure a descartar Garlic for Sisyphus. El desarrollador de Garlic, Guillaume Potier, promete hacer crecer su funcionalidad rápidamente. El enfoque de controlar el complemento mediante el uso de atributos de datos puede sonar atractivo para algunos oídos, sé que lo es para el mío. Después de enviar el formulario o restablecerlo intencionalmente, todos los valores se descartan de localStorage porque ya no son necesarios. Durante mis pruebas, los valores solo se almacenaban cuando salía de los campos usando la tecla de tabulación, al hacer clic en el formulario con el mouse no se almacenaba ningún valor. Como siempre necesita potencial para la optimización, tomo esto como se esperaba 😉 ¿Quién quiere la perfección desde el principio de todos modos?

Enlaces relacionados:

  • Documentación para Garlic.Js – Garlicjs.org
  • Traducir localStorage a UserData (propiedad de IE) – Github

#GarlicJs #SisyphusJs #estos #complementos #jQuery #almacenan #valores #formulario #con #HTML5 #LocalStorage

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *