AJAX Autosave functionality

Question

What\'s the best javascript library, or plugin or extension to a library, that has implemented autosaving functionality?

The specific need is to be able to \'save\'

Answer 1

You could save on a set time, by using timeout, but, a better method may be to just have some sort of onchange event handler, so that when data is changed, if you haven't saved within a set amount of time, then save, but, don't save on every keystroke.

So, you look to see when you last saved, before calling the ajax function.

This will enable you to save only when needed, but at a predetermined rate. So, if you want to save every 5 minutes, then regardless of what changes were made, if a change was made within that 5 minute window you save.

Making the ajax call is trivial, but jQuery can simplify it. Unfortunately, to get what you want, from what I have seen, you will need to just implement your own functionality. It is difficult to do in a general way as different people may want to save if only certain fields are changed. So, just because I click on a select box may not lead to the save function, but changing something in a text box may.

Answer 2

For simple autosave of form fields in cookies I use this great plugin http://rikrikrik.com/jquery/autosave/ It doesn't send data to the server, but if you don't find anything better, it's easier to upgrade it's funcitonalily than do it from scratch.

Answer 3

I know that this question is old, but I would like to include a code that I like the most. I found it here: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

Here is the code:

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

$commentBox.keypress(function () { // or keyup to detect backspaces
    $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);
});

It saves after the user stops writing for more than 750 milliseconds.

It also has a status letting the user know that the changes have been saved or not

Answer 4

I would suggest that you use jQuery. The "saving" part still has to be done on the backend, of course, but jQuery makes the submission of AJAX requests a breeze.

If you have an ASP.NET backend, you can simply call a WebMethod and submit the associated string (content of a textbox etc.) at a specified interval:

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

The jQuery request to call this method would be:

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});  

That's all. You can find jQuery at http://jquery.com/ .

Answer 5

If you're looking for simple and lightweight, I think the most lightweight you can get is using JavaScript's built-in setTimeout() function. Use it in combination with your choice of framework for the AJAX, and you're good to go.

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.

Answer 6

Isn't all you need a timer that fires every x seconds? The callback function will do an AJAX postback to the server of the form with a "autosave=true" field added. Just handle this postback on the server and you are done.