How to Implement Auto-Save in your Web App

Have you ever accidentally unfocused the textarea you were typing in and then hit backspace only to have the entire browser go back a page and blow away everything you were typing? Losing work is one of the most irritating things a user can experience in a web application. Today I'm going to show you how you can implement an auto-save within your web application so that you can keep your users' data safe with low network overhead.

Your first instinct might be to just create a simple event and make an ajax call every time the user presses a key, like this:

$('textarea').keypress(function () {
    $.ajax({
    	url: '/savecomment',
        data: { comment: $(this).val() }
    });
});

To the uninitiated this looks like a simple solution to this problem. However, if you think about it for a moment you'll see why this is really bad. Every time the user presses a key within the textarea you are making a call to the server. Implement code like this and you'll quickly see all the problems that result. What we really want to do is save the user's work when they have stopped typing for a certain amount of time. This is easier to do than you might think.

var timeoutId;
$('textarea').keypress(function () {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(function () {
    	$.ajax({
            url: '/savecomment',
            data: { comment: $(this).val() }
        });
    }, 750);
});

The above example simply checks if timeoutId has a value, if so then clear the timeout. Next it creates a timeout and sets timeoutId to the ID of the created timeout event. Every time the user types in the box this code will start a timer and clear the last timer that was started if there is one. Only when the user stops typing for 750 milliseconds will the timer event fire and make the ajax call to save the user's work. Here is a working example:

This little snippet of code has saved my users and myself a lot of grief. When that user or your app inevitably screws up and blows away the state of the page they were working on they will be extremely grateful when they navigate back and find their data was preserved for them. It instills confidence in your application.

An example of a slightly more complicated application is something I had to design recently for my place of work. At our company we have employees that gather data from clients over the phone and they fill out a survey in our internal web application. Since they do this for their daily job it is safe to say that most of them get pretty fast at it and that means our code has to anticipate some scenarios we might not have thought of initially.

As our employees fill out surveys they enter ratings into grids filled with text boxes and they tab from one text box to another extremely quickly. They jump around the form rapidly entering in all relevant data. These grids are large and before we redesigned the application there were plenty of irate employees who would occasionally run into lost data. We had to figure out a better solution. With so many inputs on the page we couldn't just use our simple keypress listener that we wrote above. We had to expand that code to operate on sets of text boxes so that when they stopped hopping around the form for a second then we'd go ahead and save all the fields they modified.

Here is an expanded example with multiple inputs. When the user stops tabbing through the inputs long enough then we go ahead and save only the inputs that were touched.

You'll notice that we don't bother saving every single text box, only the ones that were modified. In our little example it wouldn't make much difference to save all of the text boxes, but in our actual application where we have grids filled with many more of them it makes a lot more sense to keep the data going up to the server as minimal as possible.

With this code we successfully put a stop to the periodic rage that our users were experiencing when they would accidentally lose their work. Auto-saving is a great tool for a great user experience and helps alleviate headaches for you as the developer as well.