Guarde automáticamente la entrada del usuario en sus formularios con HTML5 y Sisyphus.js

 

 

 

  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. ¿Qué problema necesita solución?
    2. Soluciones existentes
  • Una solución: Sísifo.js
    1. Cómo usarlo
    2. Detalles de uso
  • ¿Alguna vez ha estado completando un largo formulario en línea o escribiendo un comentario elocuente y animado cuando de repente el navegador falla? O tal vez cerraste la pestaña del navegador accidentalmente, o tu conexión a Internet se corta, o se corta la electricidad (y, siendo siempre obediente a la Ley de Murphy, no tenías una fuente de alimentación de respaldo). Si no, entonces tienes suerte. Pero nadie está a salvo de catástrofes tan menores.

     

    Este artículo es el tercero de nuestra nueva serie que presenta herramientas y técnicas nuevas, útiles y disponibles gratuitamente, desarrolladas y publicadas por miembros activos de la comunidad de diseño web. El primer artículo trataba sobre PrefixFree ; el segundo presentó Foundation , un marco responsivo que le ayuda a crear prototipos y código de producción. Esta vez, presentamos Sisyphus.js, una biblioteca desarrollada por Alexander Kaupanin para proporcionar borradores del lado del cliente similares a Gmail y un poco más.

    ¿Qué problema necesita solución?

    ¿Alguna vez ha estado completando un largo formulario en línea o escribiendo un comentario elocuente y animado cuando de repente el navegador falla? O tal vez cerraste la pestaña del navegador accidentalmente, o tu conexión a Internet se corta, o se corta la electricidad (y, siendo siempre obediente a la Ley de Murphy, no tenías una fuente de alimentación de respaldo). Si no, entonces tienes suerte. Pero nadie está a salvo de catástrofes tan menores.

    (Imagen: Kristian Bjornard )

    Imagine la tormenta de emociones que siente un usuario que tuvo que agregar un poco más de información antes de enviar un formulario y luego pierde todos los datos. Horrible, ¿eh? Ahora bien, si tan solo hubiera una manera de recuperar esos datos, en lugar de emprender una búsqueda de Sísifo .

    Soluciones existentes

    Una solución común es escribir los comentarios en un documento local, guardar el archivo periódicamente y luego copiar y pegar el texto en el formulario una vez que esté completo. Algunos formularios también le permiten guardar su borrador haciendo clic en un botón, pero no todos los formularios tienen esta función y no es la solución más conveniente. El producto que mejor lo hace es Gmail, con su función de guardado automático de borradores: simplemente escriba y todo el contenido se almacenará automáticamente, sin necesidad de presionar un botón.

     

    Después de lanzar Sisyphus.js, conocí Lazarus, una extensión para Firefox y Chrome que ayuda a recuperar datos de formularios. Pero los complementos del navegador conducen a un problema aún mayor: la distribución. Algunos usuarios no tienen idea de qué es una extensión de navegador; de hecho, muchos usuarios no la tienen, lo que hace que este enfoque sea inadecuado a gran escala.

    Las personas con línea directa con los usuarios son los propios desarrolladores web. Por lo tanto, abordar el problema de las aportaciones de los usuarios en la etapa de desarrollo parece más práctico que esperar que los usuarios agreguen extensiones a su rascacielos. Mejores Opiniones y reviews

    Una solución: Sísifo.js

    Implementar el guardado automático de borradores similar a Gmail no es nada sencillo. Quería que la solución fuera simple y fácil de usar, lo que descartaría el uso de magia del lado del servidor.

    El resultado es un script sencillo que almacena datos del formulario en el almacenamiento local del navegador del usuario y los restaura cuando el usuario recarga o vuelve a abrir la página o abre la página en una nueva pestaña. Los datos se borran del almacenamiento local cuando el usuario envía o restablece el formulario.

    Cómo usarlo

    Implementar Sisyphus.js es bastante simple. Simplemente seleccione qué formularios desea proteger:

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

    O proteja todos los formularios de la página:

    $('form').sisyphus();

    Los siguientes valores son los predeterminados pero se pueden personalizar:

    {customKeyPrefix: ’,timeout: 0,onSave: function() {},onRestore: function() {},onRelease: function() {}}

    Analicemos estas opciones:

    • customKeyPrefix
      Una adición para ingresar detalles de almacenamiento local para almacenar los valores de los campos del formulario.
    • timeout
      El intervalo, en segundos, después del cual se guardan los datos. Si se establece en 0, se guardará cada vez que se actualice un campo.
    • onSave
      Una función que se activa cada vez que se guardan datos en el almacenamiento local.
    • onRestore
      Una función que se activa cuando los datos de un formulario se restauran desde el almacenamiento local. A diferencia de onSaveCallback, se aplica a todo el formulario, no a campos individuales.
    • onRelease
      Una función que se activa cuando se borran los datos almacenados en el almacenamiento local.

    Incluso después de que Sisyphus.js se haya implementado en un formulario, puede aplicarlo a cualquier otro formulario y el script no creará instancias redundantes y utilizará las mismas opciones. Por ejemplo:

    // Save form1 data every 5 seconds$('#form1').sisyphus( {timeout: 5 } );…// If you want to protect second form, too$('#form2').sisyphus( {timeout: 10} )// Now the data in both forms will be saved every 10 seconds

    Por supuesto, puedes cambiar las opciones sobre la marcha:

    var sisyphus = $('#form1').sisyphus();…// If you decide that saving by timeout would be better$.sisyphus().setOptions( {timeout: 15} );…// Orsisyphus.setOptions( {timeout: 15} );

    Detalles de uso

    Requisitos: Sisyphus.js requiere jQuery versión 1.2 o superior.

    Soporte del navegador:

    • cromo 4+,
    • Firefox 3.5+,
    • Ópera 10.5+,
    • Safari 4+,
    • es decir, 8+,
    • También funciona en Android 2.2 (tanto el navegador nativo como Dolphin HD). No se han probado otras plataformas móviles.

    Descargue el script: Sisyphus.js y la demostración están alojados en GitHub; la versión minimizada pesa aproximadamente 3,5 KB. También están disponibles una hoja de ruta y un rastreador de problemas .

    (Alabama)Explora más en

    • Codificación
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Guarde automáticamente la entrada del usuario en sus formularios con HTML5 y Sisyphus.js

    Guarde automáticamente la entrada del usuario en sus formularios con HTML5 y Sisyphus.js

    Implemente rápidamente. Implementar inteligentemente Índice ¿Qué problema necesita solución?

    programar

    es

    https://aprendeprogramando.es/static/images/programar-guarde-automaticamente-la-entrada-del-usuario-en-sus-formularios-con-html5-y-sisyphus-789-0.jpg

    2024-05-20

     

    Guarde automáticamente la entrada del usuario en sus formularios con HTML5 y Sisyphus.js
    Guarde automáticamente la entrada del usuario en sus formularios con HTML5 y Sisyphus.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20