Автосохранение окна ввода базы данных во время паузы при вводе?

У меня на моем веб-сайте большая форма, что я хочу иметь возможность автосохранения базы данных, когда пользователь ее заполняет. Почти идентично тому, как работает Google Drive при вводе документа.

Я пытаюсь не иметь функцию, которая запускается каждые X секунд, а скорее функция, которая запускается, когда пользователь сделал перерыв при вводе текста. Итак, если пользователь не набрал 1 час, но все еще находится на странице, он не продолжает нажимать на запросы сохранения.

Это все, что у меня есть до сих пор, которое представляет собой базовую форму для javascript.

$("#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;
  });

ОТВЕТЫ

Ответ 1

Откажитесь от изменения текстовой области.

Демо: jsFiddle

Поместите свой вызов ajax в функцию saveToDB(). Эти имена событий ('input propertychange change') будут срабатывать при изменении любого элемента формы, например, переключателях, входах и т.д.

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');    
}

Вот полная демонстрация, показывающая вам, как отменить полную форму и использовать ajax для отправки данных, а затем вернуть статус (сохранение, сохранение и т.д.).

Демо полная форма и ajax: jsFiddle

Ответ 2

Я знаю, что этот вопрос старый, но я хотел бы включить код, который мне больше всего нравится. Я нашел его здесь: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Вот код:

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);
});

Сохраняется после того, как пользователь перестанет писать более 750 миллисекунд.

Он также имеет статус, позволяющий пользователю узнать, что изменения были сохранены или нет.

Ответ 3

Попробуйте Sisyphus.js https://github.com/simsalabim/sisyphus. Он сохраняет данные формы в локальном хранилище браузера и устойчив к закрытию вкладок, сбоям браузера и т.д.