Storing cubes in localstorage with key appid/cubes/cubeid

src/components/cube.jsx

@@ -29,44 +29,20 @@ const Cube = forwardRef(({
   const columnToReplace = useRef(null);
   const addOpen = useRef(false);
   const forceUpdate = useForce();
+  const key = `${app.id}/cubes/${id}`;
   let model = null;
   let hypercubeProps = null;
 
-  const modifyLocalStorage = (action) => {
-    if (!isLocalStorage) return;
-    let storedCubes = localStorage.getItem(app.id);
-    const currentCube = { id, columns };
-    if (storedCubes) {
-      storedCubes = JSON.parse(storedCubes);
-      const index = storedCubes.findIndex(cube => cube.id === id);
-      if (action === 'add') {
-        if (index >= 0) {
-          // the cube is already stored. Update the stored item.
-          storedCubes.splice(index, 1, currentCube);
-        } else {
-          storedCubes.push(currentCube);
-        }
-      } else if (action === 'remove') {
-        storedCubes.splice(index, 1);
-      }
-      localStorage.setItem(app.id, JSON.stringify(storedCubes));
-    } else if (action === 'add') {
-      localStorage.setItem(app.id, currentCube);
-    }
-  };
-
-  const beforeunload = () => {
-    modifyLocalStorage('add');
-  };
-
   useEffect(() => {
-    window.addEventListener('beforeunload', beforeunload);
-
+    if (isLocalStorage) {
+      localStorage.setItem(key, JSON.stringify(columns));
+    }
     return () => {
-      modifyLocalStorage('remove');
-      window.removeEventListener('beforeunload', beforeunload);
+      if (isLocalStorage) {
+        localStorage.removeItem(key);
+      }
     };
-  });
+  }, [columns]);
 
   // Any instance of the component is extended with what is returned from the
   // callback passed as the second argument.

src/components/cubes.jsx

@@ -51,18 +51,14 @@ export function Cubes({ app, closeOnClickOutside, isLocalStorage }) {
   useEffect(() => {
     // Check if cubes are stored in localstorage.
     if (!isLocalStorage) return;
-    let storedCubes = localStorage.getItem(app.id);
+    const key = `${app.id}/cubes/`;
     const storedCubeList = [];
-    if (storedCubes) {
-      storedCubes = JSON.parse(storedCubes);
-      if (storedCubes && storedCubes.length) {
-        storedCubes.forEach((cube) => {
-          storedCubeList.push({ id: cube.id, initialColumns: cube.columns });
-          refs.current[cube.id] = React.createRef();
-        });
-      }
-      setCubeList(storedCubeList);
-    }
+    Object.keys(localStorage).filter(item => item.indexOf(key) >= 0).forEach((item) => {
+      const cube = { id: Number(item.replace(key, '')), initialColumns: JSON.parse(localStorage.getItem(item)) };
+      storedCubeList.push(cube);
+      refs.current[cube.id] = React.createRef();
+    });
+    setCubeList(storedCubeList);
   }, []);
 
   function removeCube(id) {