GrapesJS

# Storage

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 storageManager: {
   // options
 }
})

Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.

// Listen to events
editor.on('storage:start', () => { ... });

// Use the API
const storageManager = editor.Storage;
storageManager.add(...);

# Available Events

  • storage:start Storage request start.
editor.on('storage:start', (type) => {
 console.log('Storage start');
});
  • storage:start:store Storage store request start. The project JSON object to store is passed as an argument (which you can edit).
editor.on('storage:start:store', (data) => {
 console.log('Storage start store');
});
  • storage:start:load Storage load request start.
editor.on('storage:start:load', () => {
 console.log('Storage start load');
});
  • storage:load Storage loaded the project. The loaded project is passed as an argument.
editor.on('storage:load', (data, res) => {
 console.log('Storage loaded the project');
});
  • storage:store Storage stored the project. The stored project is passed as an argument.
editor.on('storage:store', (data, res) => {
 console.log('Storage stored the project');
});
  • storage:after Storage request completed. Triggered right after storage:load/storage:store.
editor.on('storage:after', (type) => {
 console.log('Storage request completed');
});
  • storage:end Storage request ended. This event triggers also in case of errors.
editor.on('storage:end', (type) => {
 console.log('Storage request ended');
});
  • storage:end:store Storage store request ended. This event triggers also in case of errors.
editor.on('storage:end:store', () => {
 console.log('Storage store request ended');
});
  • storage:end:load Storage load request ended. This event triggers also in case of errors.
editor.on('storage:end:load', () => {
 console.log('Storage load request ended');
});
  • storage:error Error on storage request.
editor.on('storage:error', (err, type) => {
 console.log('Storage error');
});
  • storage:error:store Error on store request.
editor.on('storage:error:store', (err) => {
 console.log('Error on store');
});
  • storage:error:load Error on load request.
editor.on('storage:error:load', (err) => {
 console.log('Error on load');
});

# Methods

# getConfig

Get configuration object

Returns Object (opens new window)

# isAutosave

Check if autosave is enabled.

Returns Boolean (opens new window)

# setAutosave

Set autosave value.

# Parameters

# getStepsBeforeSave

Returns number of steps required before trigger autosave.

Returns Number (opens new window)

# setStepsBeforeSave

Set steps required before trigger autosave.

# Parameters

# add

Add new storage.

# Parameters

# Examples

storageManager.add('local2', {
  async load(storageOptions) {
    // ...
  },
  async store(data, storageOptions) {
    // ...
  },
});

# get

Return storage by type.

# Parameters

Returns (Object (opens new window) | null)

# getStorages

Get all storages.

Returns Object (opens new window)

# getCurrent

Get current storage type.

Returns String (opens new window)

# setCurrent

Set current storage type.

# Parameters

# getStorageOptions

Get storage options by type.

# Parameters

Returns Object (opens new window)

# store

Store data in the current storage.

# Parameters

# Examples

const data = editor.getProjectData();
await storageManager.store(data);

Returns Object (opens new window) Stored data.

# load

Load resource from the current storage by keys

# Parameters

# Examples

const data = await storageManager.load();
editor.loadProjectData(data);

Returns Object (opens new window) Loaded data.

← Device Manager →