Restoring a user's unsaved work on a webpage

Question

TL;DR The user edits data without saving. On the next visit, (how) should the unsaved changes be made available?

Background information. I have a website that presents user created textual content (think codepen or jsfiddle). It's URL based so a typical url might be http://mysite.com/content/<content_id>/

That content is editable by anyone (like codepen and jsfiddle). To save the content they need to login. If the content belongs to them they can update. If the content does not belong to them they can fork it. They don't have to be logged in to just edit live though.

I think I want to save any edits the user has made (probably in localstorage). That way if they spend 30 minutes playing with some content and they accidentally close the tab, or the browser, or something I can restore their work.

The question is, what is a good UX workflow for this?

The problem scenario: User goes to http://mysite.com/content/draw-circle. They see a circle. They edit the code to draw a square. They don't save. The close the tab (on purpose or by accident, it doesn't matter).

Later (1min, 1hour, 1day) they go to the same URL. I don't know their intent. If I restore their edits then they don't see a circle (the original content), they'd see a square (their last edit). I'd need some other button (restore/undo) something to let them go back to the original state.

Right now when they go to the page I restore the content and clear the restore. Then only if they edit do I add a restore. That way if they go to the page and it's not the original content, picking refresh will give them the original content. They could still pick refresh by accident though.

Is there some other workflow I should consider?

—Update—

Here's an additional scenario. The user edits circle->square, then moves on to other tabs. Later the user closes the browser. The user re-opens the browser and all tabs are restored, but the user doesn't visit our tab.(busy with other tabs). The user closes the browser, then re-opens browser again; all tabs are restored but user's work has been lost.

Possible solution: only clear restore data if tab has or gets the focus.

Answer 1

You're keeping the user's unsaved work. If the browser gets closed, the user's work is not lost. But you don't know whether the user intended to abandon their unsaved changes, or whether they want to continue.

1. Choose your mental model

In a separate thread, there was discussion about why documents need to be saved. (They don't.)

If you decide to auto-save, your problem becomes:

• Decide on a mental model. Is it: undo, revert, or roll back, etc?
• Decide whether the mental model will be the same, regardless of duration. For example, will users expect they can Undo changes from a past session? If not, that's the wrong mental model.
• Decide whether to keep every iteration in the cloud.

2. Let the user decide

What you choose in step 1 constrains your options.

If you auto-save, obviously it's the user who decides whether to roll back. (This also solves the tab-recovery complication that you mentioned in the Update to your original question, above.)

If you require users to save, then, when there is something unsaved available, ensure users know this and can opt to return to an earlier state. Present the choice—or ask the user to choose—in a way that's neither intrusive or demanding, but that is sufficiently obvious at the right time.

You could try something more creative, or stick with this classic example of unsaved-document recovery, in Microsoft Office:

— I hope that helps you move forward.