## Storage You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1] ```js 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. ```js // Listen to events editor.on('storage:start', () => { ... }); // Use the API const storageManager = editor.Storage; storageManager.add(...); ``` ## Available Events * `storage:start` Storage request start. ```javascript 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). ------------------------------------------------------------------------------- ```javascript editor.on('storage:start:store', (data) => { console.log('Storage start store'); }); ``` * `storage:start:load` Storage load request start. ```javascript editor.on('storage:start:load', () => { console.log('Storage start load'); }); ``` `storage:load` Storage loaded the project. The loaded project is passed as an argument. -------------------------------------------- ```javascript 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. -------------------------------------------- ```javascript editor.on('storage:store', (data, res) => { console.log('Storage stored the project'); }); ``` `storage:after` Storage request completed. Triggered right after `storage:load`/`storage:store`. --------------------------------------------------------- ```javascript editor.on('storage:after', (type) => { console.log('Storage request completed'); }); ``` `storage:end` Storage request ended. This event triggers also in case of errors. ------------------------------------------- ```javascript 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. ------------------------------------------- ```javascript 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. ------------------------------------------- ```javascript editor.on('storage:end:load', () => { console.log('Storage load request ended'); }); ``` * `storage:error` Error on storage request. ```javascript editor.on('storage:error', (err, type) => { console.log('Storage error'); }); ``` * `storage:error:store` Error on store request. ```javascript editor.on('storage:error:store', (err) => { console.log('Error on store'); }); ``` * `storage:error:load` Error on load request. ```javascript editor.on('storage:error:load', (err) => { console.log('Error on load'); }); ``` ## Methods * [getConfig][2] * [isAutosave][3] * [setAutosave][4] * [getStepsBeforeSave][5] * [setStepsBeforeSave][6] * [getStorages][7] * [getCurrent][8] * [getCurrentStorage][9] * [setCurrent][10] * [getStorageOptions][11] * [add][12] * [get][13] * [store][14] * [load][15] ## getConfig Get configuration object Returns **[Object][16]** ## isAutosave Check if autosave is enabled. Returns **[Boolean][17]** ## setAutosave Set autosave value. ### Parameters * `value` **[Boolean][17]** ## getStepsBeforeSave Returns number of steps required before trigger autosave. Returns **[Number][18]** ## setStepsBeforeSave Set steps required before trigger autosave. ### Parameters * `value` **[Number][18]** ## add Add new storage. ### Parameters * `type` **[String][19]** Storage type * `storage` **[Object][16]** Storage definition * `storage.load` **[Function][20]** Load method * `storage.store` **[Function][20]** Store method ### Examples ```javascript storageManager.add('local2', { async load(storageOptions) { // ... }, async store(data, storageOptions) { // ... }, }); ``` ## get Return storage by type. ### Parameters * `type` **[String][19]** Storage type Returns **([Object][16] | null)** ## getStorages Get all storages. Returns **[Object][16]** ## getCurrent Get current storage type. Returns **[String][19]** ## setCurrent Set current storage type. ### Parameters * `type` **[String][19]** Storage type ## getStorageOptions Get storage options by type. ### Parameters * `type` **[String][19]** Storage type Returns **[Object][16]** ## store Store data in the current storage. ### Parameters * `data` **[Object][16]** Project data. * `options` **[Object][16]?** Storage options. (optional, default `{}as T`) ### Examples ```javascript const data = editor.getProjectData(); await storageManager.store(data); ``` Returns **[Object][16]** Stored data. ## load Load resource from the current storage by keys ### Parameters * `options` **[Object][16]?** Storage options. (optional, default `{}as T`) ### Examples ```javascript const data = await storageManager.load(); editor.loadProjectData(data); ``` Returns **[Object][16]** Loaded data. [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/storage_manager/config/config.ts [2]: #getconfig [3]: #isautosave [4]: #setautosave [5]: #getstepsbeforesave [6]: #setstepsbeforesave [7]: #getstorages [8]: #getcurrent [9]: #getcurrentstorage [10]: #setcurrent [11]: #getstorageoptions [12]: #add [13]: #get [14]: #store [15]: #load [16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function