Switch to IndexedDB

relog-web/package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/user-event": "^13.5.0",
         "d3": "^7.3.0",
         "dagre": "^0.8.5",
+        "idb": "^6.1.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-flow-renderer": "^9.7.4",

relog-web/package.json

@@ -14,6 +14,7 @@
     "@testing-library/user-event": "^13.5.0",
     "d3": "^7.3.0",
     "dagre": "^0.8.5",
+    "idb": "^6.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flow-renderer": "^9.7.4",

relog-web/src/InputPage.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import { openDB, deleteDB, wrap, unwrap } from "idb";
 
 import "./index.css";
 import PipelineBlock from "./PipelineBlock";
@@ -56,18 +57,30 @@ const fixLists = (dict, blacklist, stringify) => {
   }
 };
 
+const openRelogDB = async () => {
+  const dbPromise = await openDB("RELOG", 1, {
+    upgrade(db) {
+      db.createObjectStore("casebuilder");
+    },
+  });
+  return dbPromise;
+};
+
 const InputPage = () => {
   const fileElem = useRef();
+  let [data, setData] = useState(defaultData);
 
-  let savedData = JSON.parse(localStorage.getItem("data"));
+  const save = async (data) => {
-  if (!savedData) savedData = defaultData;
+    const db = await openRelogDB();
-
+    await db.put("casebuilder", data, "data");
-  let [data, setData] = useState(savedData);
-
-  const save = (data) => {
-    localStorage.setItem("data", JSON.stringify(data));
   };
 
+  useEffect(async () => {
+    const db = await openRelogDB();
+    const data = await db.get("casebuilder", "data");
+    if (data) setData(data);
+  }, []);
+
   const promptName = (prevData) => {
     const name = prompt("Name");
     if (!name || name.length === 0) return;