---
title: "Autosave plugin"
description: "Automatically save content in your local browser."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/autosave/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/autosave/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1072
---
# Autosave plugin

The autosave plugin gives the user a warning if they have unsaved changes in the editor and either:

- Try to close the browser window or tab, or
- Try to navigate away from the current page.
The autosave plugin adds:

- A menu item, "Restore last draft" under the `File` menu, and
- An optional toolbar button.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  toolbar: 'restoredraft'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Options

These settings affect the execution of the `autosave` plugin. The settings described here will affect the interval, duration and behavior of locally stored drafts of the current editor instance.

### `autosave_ask_before_unload`

This option allows you to set whether the editor should prompt the user to advise them that they have unsaved changes when attempting to close the current window. By default this option is enabled and an example of disabling this setting is included below.

**Type:** `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`

#### Example: using `autosave_ask_before_unload`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  autosave_ask_before_unload: false
});
```

### `autosave_interval`

This option enables you to specify the time the editor should wait between taking snapshots of the current content and saving them to local storage. The syntax is to append the letter `s` to the end of a number value. For example, "30s" for 30 seconds.

**Type:** `String`

**Default value:** `'30s'`

#### Example: using `autosave_interval`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  autosave_interval: '20s'
});
```

### `autosave_prefix`

This option allows you to set the prefix that is used for local storage keys.

**Type:** `String`

**Default value:** `'tinymce-autosave-{path}{query}-{id}-'`

#### Example: using `autosave_prefix`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  autosave_prefix: 'tinymce-autosave-{path}{query}-{id}-'
});
```

### `autosave_restore_when_empty`

This option enables you to specify if TinyMCE should automatically restore the content stored in local storage when the editor is empty on initialization. This can be useful for users who don’t know that they can restore lost work if the browser crashed by selecting `Restore last draft` from the `File` menu.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `autosave_restore_when_empty`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  autosave_restore_when_empty: true
});
```

### `autosave_retention`

This option lets you to specify the duration editor content should remain in local storage. Content older than the set time will be ignored. The syntax is to append the letter `m` to the end of a number value. For example, "20m" for 20 minutes.

**Type:** `String`

**Default value:** `'20m'`

#### Example: using `autosave_retention`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autosave',
  autosave_retention: '30m'
});
```

## Toolbar buttons

The Autosave plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `restoredraft` | Restores to the latest auto saved draft. |
These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Autosave plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `restoredraft` | File | Restores to the latest auto saved draft. |
These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).