Harvtronix Harvtronix - 2 years ago 81
HTML Question

How to save page state during close

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
    event handler if there is unsaved work. (problem: my team lead is unwilling to budge on allowing a browser-specific "
    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
    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
    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
    event handlers. (problem: huge amounts of coding overhead compared to the more "lazy" implementations above and below.)

  • Using
    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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download