Refactor LocalStorage

src/editor/model/Editor.js

@@ -616,14 +616,14 @@ export default class EditorModel extends Model {
     if (!sm) return;
 
     const isCallback = isFunction(opts);
-    const store = this.storeData();
-    sm.store(store, res => {
-      clb && clb(res, store);
+    const toStore = this.storeData();
+    sm.store(toStore, res => {
+      isCallback && opts(res, toStore);
       this.set('changesCount', 0);
-      this.trigger('storage:store', store);
+      this.trigger('storage:store', toStore);
     });
 
-    return store;
+    return toStore;
   }
 
   storeData() {
@@ -683,7 +683,7 @@ export default class EditorModel extends Model {
       keys.forEach(k => load.push(k));
     });
 
-    sm.load(load, res => {
+    sm.load(res => {
       this.cacheLoad = res;
       clb && clb(res);
       setTimeout(() => this.trigger('storage:load', res));

src/storage_manager/config/config.js

@@ -34,7 +34,10 @@ export default {
   // Default storage options
   options: {
     local: {
-      key: 'gjs-project',
+      key: 'gjsProject',
+
+      // If enabled, checks if browser supports LocalStorage
+      checkLocal: true,
     },
     remote: {
       // Custom parameters to pass with the remote request, eg. csrf token

src/storage_manager/index.js

@@ -221,24 +221,24 @@ export default () => {
      * @example
      * storageManager.store({item1: value1, item2: value2});
      * */
-    store(data, resolve, reject, options = {}) {
+    async store(data, resolve, reject, options = {}) {
+      const ev = 'store';
       const st = this.getCurrentStorage();
-      const toStore = {};
       const opts = { ...this.getCurrentOptons(), ...options };
-      this.onStart('store', data);
+      this.onStart(ev, data);
 
       const onResult = res => {
-        this.onAfter('store', res);
+        this.onAfter(ev, res);
         resolve?.(res);
-        this.onEnd('store', res);
+        this.onEnd(ev, res);
       };
 
       const onError = err => {
         reject?.(err);
-        this.onError('store', err);
+        this.onError(ev, err);
       };
 
-      return st ? st.store(toStore, onResult, onError, opts) : null;
+      return st ? st.store(data, onResult, onError, opts) : null;
     },
 
     /**
@@ -253,35 +253,26 @@ export default () => {
      * // res -> {item1: value1}
      * });
      * */
-    load(keys, clb) {
+    async load(resolve, reject, options = {}) {
+      const ev = 'load';
       const st = this.getCurrentStorage();
-      const keysF = [];
+      const opts = { ...this.getCurrentOptons(), ...options };
       let result = {};
+      this.onStart(ev);
 
-      if (typeof keys === 'string') keys = [keys];
-      this.onStart('load', keys);
+      const onResult = res => {
+        result = this.__clearKeys(res);
+        this.onAfter(ev, result);
+        resolve?.(result);
+        this.onEnd(ev, result);
+      };
 
-      for (var i = 0, len = keys.length; i < len; i++) {
-        keysF.push(c.id + keys[i]);
-      }
+      const onError = err => {
+        reject?.(err);
+        this.onError(ev, err);
+      };
 
-      if (st) {
-        st.load(
-          keysF,
-          res => {
-            result = this.__clearKeys(res);
-            this.onAfter('load', result);
-            clb && clb(result);
-            this.onEnd('load', result);
-          },
-          err => {
-            clb && clb(result);
-            this.onError('load', err);
-          }
-        );
-      } else {
-        clb && clb(result);
-      }
+      return st ? st.load(onResult, onError, opts) : resolve(result);
     },
 
     /**

src/storage_manager/model/LocalStorage.js

@@ -1,37 +1,46 @@
 import { Model } from 'backbone';
 import { hasWin } from 'utils/mixins';
 
+const noLocalStorage = 'localStorage not available';
+
 export default Model.extend({
   defaults: {
-    checkLocal: true
+    checkLocal: true,
   },
 
   /**
    * @private
    */
-  store(data, clb = () => {}) {
-    if (this.hasLocal()) {
-      for (let key in data) localStorage.setItem(key, data[key]);
+  async store(data, resolve, reject, opts) {
+    try {
+      if (this.hasLocal()) {
+        localStorage.setItem(opts.key, JSON.stringify(data));
+        return resolve();
+      } else {
+        reject(noLocalStorage);
+      }
+    } catch (error) {
+      reject(error);
     }
-
-    clb && clb();
   },
 
   /**
    * @private
    */
-  load(keys, clb = () => {}) {
-    const result = {};
+  async load(resolve, reject, opts) {
+    let result = {};
 
-    if (this.hasLocal()) {
-      for (let i = 0, len = keys.length; i < len; i++) {
-        const value = localStorage.getItem(keys[i]);
-        if (value) result[keys[i]] = value;
+    try {
+      if (this.hasLocal()) {
+        result = JSON.parse(localStorage.getItem(opts.key) || '{}');
+        resolve(result);
+      } else {
+        reject(noLocalStorage);
       }
+    } catch (error) {
+      reject(error);
     }
 
-    clb && clb(result);
-
     return result;
   },
 
@@ -41,8 +50,7 @@ export default Model.extend({
   remove(keys) {
     if (!this.hasLocal()) return;
 
-    for (let i = 0, len = keys.length; i < len; i++)
-      localStorage.removeItem(keys[i]);
+    for (let i = 0, len = keys.length; i < len; i++) localStorage.removeItem(keys[i]);
   },
 
   /**
@@ -50,13 +58,10 @@ export default Model.extend({
    * @private
    * */
   hasLocal() {
-    const win = hasWin();
-
-    if (this.get('checkLocal') && (!win || !localStorage)) {
-      win && console.warn("Your browser doesn't support localStorage");
+    if (this.get('checkLocal') && (!hasWin() || !localStorage)) {
       return false;
     }
 
     return true;
-  }
+  },
 });