How to save page state during close

Question

What is the accepted way to synchronize a webapp's data with a server when a user closes their browser window without first saving their work? I'm talking by either hitting the "X" or even by pressing F5 or something.

A little background:

The webapp in question has a main window, and then child windows which spawn from the main window, enabling sandboxed "work" to be done in the child windows. I don't have control over this aspect of the implementation.

The use case:

Each child window can have a fairly sizable amount of information entered before the user decides to click "OK" to persist the data on the server.

Things I've considered/tried:

• Simple close confirmation by returning a string from an onbeforeunload event handler if there is unsaved work. (problem: my team lead is unwilling to budge on allowing a browser-specific "alert dialog" to be in the webapp. According to him: User experience goes out the window relying on that ugly looking dialog.)
• AJAX request fired during the onpageunload event which sends the data back to the server. (problem: since the XHR callback is never called, I find some browsers leaving the connection open, and then randomly attempting to fire the callback of a future window that is opened.)
• Synchronous AJAX request fired during the onpageunload event. (problem: Ignoring the fact that people including myself tend to hate doing this and the fact that it is deprecated and will be removed in the future... The UI could potentially hang for a long period of time waiting for the AJAX request to complete, maybe indefinitely if they lose internet.)
• Saving the contents of the page at regular intervals, or by attaching onchange/onblur/onwhateverelse event handlers. (problem: huge amounts of coding overhead compared to the more "lazy" implementations above and below.)
• Using localStorage to keep the changed fields on the client's machine until they actually commit their work to the server. (problem: browser support... this needs to support as many places as support XHR. Does client-side storage have that wide of support? I think there's a bit of a gap if I'm not mistaken.)

Thanks in advance for your input.

Answer 1

The solution that I came up with is essentially a modified version of choice 4 from above.

I developed some logic which registers onchange/onkeypress event handlers with nodes identified by a certain attribute (in this case data-save-state="true") when the page loads.

To make use of this, the only requirement for the developers of each of the "child windows" that are launched from the main window is to register the URI to which they want their data saved with my new javascript Saver module.

The identified element's values are serialized and sent as a JSON object to the Saver. The Saver is responsible for queuing up sets of requests and sending them to the server as a group once no further changes have been detected for 1000 ms.

This was more overhead for me who had to develop the ability to do this, but now that it is there, it's pretty simple for other team members to integrate into their code.

As far as the potential for lost data, the only risk now is during that second of time before the save request is sent to the server. This solution seems very "Google Docs"-like in nature to me.

Answer 2

Sounds to me like you want to use cookies. As far as I know it's supported on practically any web browser.

The only thing localStorage isn't supported on is Opera Mini.. I guess that's a bit too much non-support for you, or the person you're making the program for.

Here's a plugin for handling cookies, because they really aren't something you want to handle without plugins. ;) Looks like it's supported on any browser!

In case you don't want to use a library, here's the Mozilla Developer Network page on Document.cookie.

If you want to read about cookies' history, you could check out this.