Autosave drafts in an ASP.NET Core rich text editor

A browser crash, an expired session or an accidental click can throw away an hour of writing. Autosave keeps a draft in the user's browser and brings it back when they return. In RichTextBox it is one attribute.

Turn it on

<richtextbox name="Body"
             toolbar="default"
             height="400px"
             auto-save="true"></richtextbox>

Type something and reload the page: the text comes back.

Set the delay and the key

<richtextbox name="Body"
             auto-save="true"
             auto-save-delay="2000"
             auto-save-key="[email protected]@User.Identity?.Name"></richtextbox>

auto-save-delay is how long, in milliseconds, to wait after typing stops.
auto-save-key is the name the draft is stored under.

Set a key per document. If every article's edit page shares a key, the draft from one article could reappear in another. Including the record's id prevents that. Including the user keeps drafts apart on a shared computer.

Where the draft lives

Drafts are kept in the browser's localStorage. That means:

nothing is sent to your server until the user saves,
a draft stays on that one browser, and does not follow them to another device,
on a shared computer, anyone using that browser profile could see it.

So autosave protects against lost work. It is not saving. For drafts that follow a user around, also save in the background to your database.

Several editors on one page

Give each its own key, so their drafts do not collide:

<richtextbox name="Summary" auto-save="true" auto-save-key="draft-summary"></richtextbox>
<richtextbox name="Body" auto-save="true" auto-save-key="draft-body"></richtextbox>

Try it in the multiple editor drafts demo.