Strategies for preserving form data ( on tab/browser close )

Question

I have an issue with a task management application where occasionally users close their browsers/tabs and the information which they type goes away because they accidentally close a browser/tab, resulting in the loss of the text which they've entered ( and some can spend half an hour entering in text ).

So I have to provide a solution, I have a couple ideas but wanted input on the best to go with, or if you have a better solution let me hear ya.

Option 1:

• On the window.onunload or possibly window.onbeforeunload event invoke a confirm() dialog and first test whether the task logging area has any text in it and is not blank. If it's not blank, invoke window.confirm() and ask whether the user wants to close the tab/window without saving a log.

My concern with option #1 is that it may be user intrusive.

Option 2:

• On the same event, don't invoke any confirm() but instead forcefully save the text in the task logging area in a cookie. Then possibly offer a button that tries to restore any saved task information from the cookie on the same page, so hitting that button would make it parse the cookies and retrieve the information.

Paronomasia

What does "user intrusive" mean? – Allpowerful

Well, you know how alert and confirm windows are naturally annoying, however this may be the only exception to that rule? I dunno. – Paronomasia

If they do things "right", there's no dialog, correct? If they type stuff, forget to save and lose they're work that's bad, right? What's wrong with asking them if they want to keep or ignore unsaved changes? – Allpowerful

Answer 1

If the user is daft enough to navigate away before submitting what they have been doing, then they shouldn't mind an intrusion to ask if they mean to do something that is apparently stupid.

Also, SO uses a confirmation dialog on navigating away, and most (some) users here are pretty smart.

This is the easiest to use, and will probably help the users more.

If someone writes a long piece of text, then closes the browser without submitting it, they might be more pleased to sort the problem there and then rather than finding out the next morning they didn't do it...

Ventricose

Answer 2

The window.onbeforeunload event works a little strangely. If you define a handler for it, the browser will display a generic message about losing data by navigating away from the page, with the string you return from the handler function inserted into the middle of the message. See here:

alt text http://img291.imageshack.us/img291/8724/windowonbeforeunload.png

So what we do: when we know something on the page is unsaved, we set:

window.onbeforeunload = function(){
 return "[SOME CUSTOM MESSAGE FROM THE APP]";
}

and once the user saves, and we know we don't need to show them the message, we set:

window.onbeforeunload = null;

It is a little intrusive, but it's better than your users losing data accidentally.

Thurifer

Answer 3

I would research AJAX frameworks for the particular web server/languages you are using. AJAX would allow you to save form data as it is typed (for example, this is how Google Docs works).

Jurdi

I know how to do this but I feel it would heavily clog the server - I mean.. binding a keyup event for dozens of users and sending an ajax request every couple of seconds for every user? – Paronomasia

You don't have to do it on keyup, you could just do it on blur. That at least implies that the user has finished what they were doing in that particular field and that it's worth saving. – Waine

Right..maybe "As it is typed" is too much. If you did it on a timer every 60 seconds, every 5 minutes, etc if and only if the text has changed, that might also work for your scenario. – Jurdi