javascript - ¿Se guardan automáticamente los cuadros de entrada en la base de datos durante la pausa en la escritura?

jquery autosave

Question

Tengo un formulario grande en mi sitio web que deseo poder guardar automáticamente en una base de datos cuando el usuario lo está llenando. Casi idéntico a cómo funciona Google Drive al escribir un documento.

Intento no tener una función que se ejecute cada X segundos, sino una función que se ejecuta cuando el usuario ha interrumpido la escritura. Por lo tanto, si el usuario no ha escrito en 1 hora pero aún está en la página, no sigue presionando las solicitudes de guardado.

Esto es todo lo que tengo hasta ahora, que es un envío de formulario javascript básico.

$("#page1Form").submit(function(event){
  event.preventDefault();  
  $changesSaved.text("Saving...");
  var url = "/backend/forms/page1-POST.php";
        $.ajax({
         type: "POST",
         url: url,
         data: $("#page1Form").serialize(),
         success: function(data) { $changesSaved.text(data); }
        });
  return false;
  });

Answer 1

Debounce el cambio de área de texto.

Demo: jsFiddle

Ponga su llamada ajax en la función saveToDB() . Estos nombres de eventos ( ''input propertychange change'' ) se activarán en cualquier cambio de elemento de formulario, como botones de opción, entradas, etc.

var timeoutId;
$(''#the-textarea'').on(''input propertychange change'', function() {
    console.log(''Textarea Change'');

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        saveToDB();
    }, 1000);
});

function saveToDB()
{
    console.log(''Saving to the db'');    
}

Aquí hay una demostración completa que muestra cómo deshacer un formulario completo y usar ajax para enviar los datos y luego devolver el estado (Guardando, Guardado, etc.).

Demo de forma completa y ajax: jsFiddle

Answer 2

Pruebe Sisyphus.js https://github.com/simsalabim/sisyphus . Persiste los datos del formulario en el almacenamiento local del navegador y es robusto contra el cierre de pestañas, bloqueos del navegador, etc.

Answer 3

Sé que esta pregunta es antigua, pero me gustaría incluir un código que me guste más. Lo encontré aquí: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Aquí está el código:

var $status = $(''#status''),
    $commentBox = $(''#commentBox''),
    timeoutId;

$commentBox.keypress(function () {
    $status.attr(''class'', ''pending'').text(''changes pending'');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr(''class'', ''saved'').text(''changes saved'');
    }, 750);
});

Se guarda después de que el usuario deja de escribir durante más de 750 milisegundos.

También tiene un estado que le permite al usuario saber que los cambios se han guardado o no.