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 - Before the storage request is started
  • storage:start:store - Before the store request. The object to store is passed as an argument (which you can edit)
  • storage:start:load - Before the load request. Items to load are passed as an argument (which you can edit)
  • storage:load - Triggered when something was loaded from the storage, loaded object passed as an argument
  • storage:store - Triggered when something is stored to the storage, stored object passed as an argument
  • storage:end - After the storage request is ended
  • storage:end:store - After the store request
  • storage:end:load - After the load request
  • storage:error - On any error on storage request, passes the error as an argument
  • storage:error:store - Error on store request, passes the error as an argument
  • storage:error:load - Error on load request, passes the error as an argument

# 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 →