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
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?
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.