リロードしても書いたコードが消えないようにした #13

編集されたコードは localStorage に保存しておくことで実現した．
単にリロードされたときなどには localStorage に保存しておいたやつを読み込む．
ヘッダーをクリックすると localStorage に保存しておいたコードを消すことでデフォルトコードに戻せるようにしておいた．

frontend/pages/index.tsx

@@ -16,6 +16,7 @@ import FL from "@/components/FL";
 import KGenProg from "@/components/KGenProg";
 import useForceUpdate from "@/hooks/useForceUpdate";
 import styles from "@/styles/Home.module.css";
+import * as LocalStorage from "@/utils/LocalStorage";
 
 const HoverableGitHubIcon = styled(GitHubIcon)({
   "&:hover": {
@@ -33,14 +34,16 @@ const Home: NextPage = () => {
   const [ctrl, setCtrl] = useState<"repair" | "fl" | "test" | null>(null);
   const forceUpdate = useForceUpdate();
 
+  const setText = useCallback((text: string, editor: Ace.Editor) => {
+    editor.insert(text);
+    editor.gotoLine(1, 0, false);
+    editor.getSession().getUndoManager().reset();
+  }, []);
+
   const loadDefaultSrc = useCallback((uri: RequestInfo, editor: Ace.Editor) => {
     void fetch(uri)
       .then((resp) => resp.text())
-      .then((text) => {
-        editor.insert(text);
-        editor.gotoLine(1, 0, false);
-        editor.getSession().getUndoManager().reset();
-      });
+      .then((text) => setText(text, editor));
   }, []);
 
   const onSuccess = useCallback(() => {
@@ -87,7 +90,14 @@ const Home: NextPage = () => {
       </Head>
 
       <header id={styles.logo}>
-        <a className={styles.title} href="./">
+        <a
+          className={styles.title}
+          href="./"
+          onClick={() => {
+            LocalStorage.removeItem(LocalStorage.KEY.SRC);
+            LocalStorage.removeItem(LocalStorage.KEY.TEST);
+          }}
+        >
           {/* <img className={styles.logoImg} src="/logo.png" /> */}
           <h1>FL online demo</h1>
         </a>
@@ -140,15 +150,35 @@ const Home: NextPage = () => {
             headerText="Source"
             onLoad={(editor) => {
               setSrcEditor(editor);
-              loadDefaultSrc("default-src.java", editor);
+
+              const cache = LocalStorage.getItem(LocalStorage.KEY.SRC);
+              if (cache === null) {
+                loadDefaultSrc("default-src.java", editor);
+              } else {
+                setText(cache, editor);
+              }
+            }}
+            onChange={(value) => {
+              LocalStorage.setItem(LocalStorage.KEY.SRC, value);
+              console.log(value);
             }}
             name="src"
           />
           <Editor
             headerText="Test"
             onLoad={(editor) => {
               setTestEditor(editor);
-              loadDefaultSrc("default-test.java", editor);
+
+              const cache = LocalStorage.getItem(LocalStorage.KEY.TEST);
+              if (cache === null) {
+                loadDefaultSrc("default-test.java", editor);
+              } else {
+                setText(cache, editor);
+              }
+            }}
+            onChange={(value) => {
+              LocalStorage.setItem(LocalStorage.KEY.TEST, value);
+              console.log(value);
             }}
             name="test"
           />

frontend/utils/LocalStorage.ts

@@ -0,0 +1,16 @@
+const KEY = {
+  SRC: "src",
+  TEST: "test",
+} as const;
+
+type Key = typeof KEY[keyof typeof KEY];
+
+const getItem = (key: Key) => localStorage.getItem(key);
+
+const removeItem = (key: Key) => localStorage.removeItem(key);
+
+const setItem = (key: Key, value: string) => localStorage.setItem(key, value);
+
+const clear = () => localStorage.clear();
+
+export { KEY, getItem, removeItem, setItem, clear };