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

问题

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.

回答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...

回答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.

回答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).

来源：https://stackoverflow.com/questions/1589478/strategies-for-preserving-form-data-on-tab-browser-close