Issue #3406Opened April 20, 2021by vatte210 reactions

BUG: How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page

Question

Hello everyone, i want to save data from canvas to redux store, and it works, but after reloading the page, storage load method , doesnt set my data to builder (canvas), i dont know whats wrong, let me know if someone has any solutions.

Code example :

grapejs.init({
...///
storageManager: {
              type: 'redux-storage',
              autosave: false,
              autoload: 1,
            },
...///
});

 const reduxStorage = {};
 const storageManager = editor.StorageManager;


storageManager.add('redux-storage', {
              load(keys, clb, clbErr) {
                const result = {};
                keys.forEach(key => {
                  const resultKey = key.slice(4);
                  const item = localStorage.getItem(resultKey);
                  const value = reduxStorage[key];
                  if (item) {
                    result[resultKey] = item;
                  }
                });
                // Might be called inside some async method
                clb(result);
              },
              store(data, clb, clbErr) {
                for (let key in data) {
                  reduxStorage[key] = data[key];
                  localStorage.setItem(key, data[key])
                }
                // Might be called inside some async method
                clb();
              }
            })
            storageManager.load(['gjs-css', 'gjs-components', 'gjs-styles', 'gjs-assets', 'gjs-html'], res => {
              console.log(res, 'res storageManager.load()')           
            });

Answers (1)

artfApril 20, 20210 reactions

Remove this one const resultKey = key.slice(4);. You're storing data with the prefix but then you're loading it without

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.