> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumen.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Auto-Save Editor Content to localStorage

> Configure Lumen Editor's built-in auto-save with a storage key and debounce delay, then listen to the autosave event and restore content on page load.

Lumen Editor includes a built-in auto-save mechanism that persists editor content to `localStorage` as the user types, with no extra libraries required. You configure it once at initialization and the editor handles debouncing, serialization, and storage for you — so your users never lose work if they close the tab or navigate away unexpectedly.

## Enabling auto-save

Pass an `autoSave` object to the editor constructor with two properties: a `key` that names the `localStorage` entry, and an optional `debounce` delay in milliseconds.

```js theme={null}
const editor = new Editor('#editor', {
  autoSave: {
    key: 'my-doc',      // localStorage key
    debounce: 800       // ms to wait after last keystroke (default: 800)
  }
});
```

The editor starts a debounced timer on every `change` event. Once `debounce` milliseconds have elapsed since the last change, it writes the current HTML content to `localStorage` under the given `key`.

<Note>
  The `key` is written directly to `localStorage`, so it shares the same namespace as every other key your page sets. Use a namespaced key like `lumen:doc-123` to avoid collisions with other scripts or libraries on the same origin.
</Note>

<Tip>
  In multi-document applications, use the document's unique ID as part of the key — for example `lumen:doc-${documentId}` — so each document has its own isolated auto-save slot.
</Tip>

## Listening to the autosave event

The editor emits an `autosave` event each time it successfully writes to `localStorage`. Hook into it to display a "Saved" indicator, update a status bar, or trigger any other side effect:

```js theme={null}
editor.on('autosave', () => {
  console.log('Content auto-saved!');
  document.querySelector('#save-status').textContent = 'Saved';
});
```

The event fires after the debounce timer completes and the write succeeds. It carries no payload — you can read the latest content from `localStorage` or from `editor.getHTML()` if you need it.

## Restoring saved content

On page load, check `localStorage` for a previously saved draft and pass it as the `value` option so the editor initializes with the restored content:

```js theme={null}
const savedContent = localStorage.getItem('my-doc');

const editor = new Editor('#editor', {
  value: savedContent ?? '',   // restore draft, or start empty
  autoSave: {
    key: 'my-doc',
    debounce: 800
  }
});
```

If no saved content exists, `localStorage.getItem` returns `null`, so the nullish coalescing fallback (`?? ''`) ensures the editor starts with an empty document.

## End-to-end example

The following snippet combines initialization, draft restoration, auto-save configuration, and status feedback into a complete setup you can drop into any page:

```js theme={null}
const DOC_KEY = 'lumen:my-doc';

// Restore any previously auto-saved draft
const savedDraft = localStorage.getItem(DOC_KEY);

const editor = new Editor('#editor', {
  value: savedDraft ?? '',
  autoSave: {
    key: DOC_KEY,
    debounce: 800
  }
});

// Show a "Saved" indicator after each auto-save
const status = document.querySelector('#save-status');

editor.on('autosave', () => {
  status.textContent = '✓ Saved';
  // Fade it out after 2 seconds
  setTimeout(() => { status.textContent = ''; }, 2000);
});

editor.on('change', () => {
  status.textContent = 'Unsaved changes…';
});
```

<Accordion title="Clearing a saved draft">
  To discard the auto-saved draft — for example when the user explicitly clicks a "Discard" button — remove the key from `localStorage` directly:

  ```js theme={null}
  localStorage.removeItem(DOC_KEY);
  ```

  The next auto-save cycle will create a fresh entry.
</Accordion>