# StorageManager

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.StorageManager;

# 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 argumnet (which you can edit)
  • storage:start:load - Before the load request. Items to load are passed as an argumnet (which you can edit)
  • storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
  • storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
  • 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

Checks if autosave is enabled

Returns Boolean (opens new window)

# setAutosave

Set autosave value

# Parameters

Returns this

# getStepsBeforeSave

Returns number of steps required before trigger autosave

Returns number (opens new window)

# setStepsBeforeSave

Set steps required before trigger autosave

# Parameters

Returns this

# add

Add new storage

# Parameters

# Examples

storageManager.add('local2', {
  load: function(keys, clb, clbErr) {
    var res = {};
    for (var i = 0, len = keys.length; i < len; i++){
      var v = localStorage.getItem(keys[i]);
      if(v) res[keys[i]] = v;
    clb(res); // might be called inside some async method
    // In case of errors...
    // clbErr('Went something wrong');
  store: function(data, clb, clbErr) {
    for(var key in data)
      localStorage.setItem(key, data[key]);
    clb(); // might be called inside some async method

Returns this

# get

Returns storage by id

# Parameters

Returns (Object (opens new window) | null)

# getStorages

Returns all storages

Returns Array (opens new window)

# getCurrent

Returns current storage type

Returns string (opens new window)

# setCurrent

Set current storage type

# Parameters

Returns this

# store

Store key-value resources in the current storage

# Parameters

# Examples

storageManager.store({item1: value1, item2: value2});

Returns (Object (opens new window) | null)

# load

Load resource from the current storage by keys

# Parameters

# Examples

storageManager.load(['item1', 'item2'], res => {
 // res -> {item1: value1, item2: value2}
storageManager.load('item1', res => {
// res -> {item1: value1}

# getCurrentStorage

Get current storage

Returns Storage