grapesjs/docs/api/storage_manager.md

StorageManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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;
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 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
• isAutosave
• setAutosave
• getStepsBeforeSave
• setStepsBeforeSave
• setStepsBeforeSave
• getStorages
• getCurrent
• getCurrentStorage
• setCurrent
• add
• get
• store
• load

getConfig

Get configuration object

Returns Object

isAutosave

Checks if autosave is enabled

Returns Boolean

setAutosave

Set autosave value

Parameters

• v Boolean

Returns this

getStepsBeforeSave

Returns number of steps required before trigger autosave

Returns number

setStepsBeforeSave

Set steps required before trigger autosave

Parameters

• v number

Returns this

add

Add new storage

Parameters

• id string Storage ID

• storage Object Storage wrapper

  • storage.load Function Load method
  • storage.store Function Store method

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

• id string Storage ID

Returns (Object | null)

getStorages

Returns all storages

Returns Array

getCurrent

Returns current storage type

Returns string

setCurrent

Set current storage type

Parameters

• id string Storage ID

Returns this

store

Store key-value resources in the current storage

Parameters

• data Object Data in key-value format, eg. {item1: value1, item2: value2}
• clb Function Callback function

Examples

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

Returns (Object | null)

load

Load resource from the current storage by keys

Parameters

• keys (string | Array<string>) Keys to load
• clb Function Callback function

Examples

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

getCurrentStorage

Get current storage

Returns Storage