添加memorize localStorage本地存储功能

messages/en-US/memorize/main.json

@@ -5,6 +5,6 @@
   "total": "There are {total} word pairs in total",
   "start": "Start",
   "import": "Import",
-  "save": "Save",
+  "export": "Export",
   "edit": "Edit"
 }

messages/zh-CN/memorize/main.json

@@ -5,6 +5,6 @@
   "total": "总计有{total}个单词对",
   "start": "开始",
   "import": "导入",
-  "save": "保存",
+  "export": "导出",
   "edit": "编辑"
 }

src/app/memorize/Edit.tsx

@@ -51,6 +51,9 @@ export default function Edit({ setPage, wordData, setWordData }: Props) {
     setWordData(newWordData);
     if (textareaRef.current)
       textareaRef.current.value = convertFromWordData(newWordData);
+    if(localStorage) {
+      localStorage.setItem("wordData", JSON.stringify(newWordData));
+    }
   };
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     input = e.target.value;

src/app/memorize/Main.tsx

@@ -61,7 +61,7 @@ export default function Main({
               {t("start")}
             </LightButton>
             <LightButton onClick={handleLoad}>{t("import")}</LightButton>
-            <LightButton onClick={handleSave}>{t("save")}</LightButton>
+            <LightButton onClick={handleSave}>{t("export")}</LightButton>
             <LightButton onClick={() => setPage("edit")}>
               {t("edit")}
             </LightButton>

src/app/memorize/page.tsx

@@ -4,29 +4,30 @@ import { useState } from "react";
 import Main from "./Main";
 import Edit from "./Edit";
 import Start from "./Start";
-import { WordData } from "@/interfaces";
+import { WordData, WordDataSchema } from "@/interfaces";
+
+const getLocalWordData = (): WordData => {
+  const data = localStorage.getItem("wordData");
+  if (!data) return {
+    locales: ['en-US', 'zh-CN'],
+    wordPairs: []
+  };
+  try {
+    const parsedData = JSON.parse(data);
+    const parsedData2 = WordDataSchema.parse(parsedData);
+    return parsedData2;
+  } catch (error) {
+    console.error(error);
+    return {
+      locales: ['en-US', 'zh-CN'],
+      wordPairs: []
+    };
+  }
+}
 
 export default function Memorize() {
   const [page, setPage] = useState<"start" | "main" | "edit">("main");
-  const [wordData, setWordData] = useState<WordData>({
+  const [wordData, setWordData] = useState<WordData>(getLocalWordData());
-    locales: ["en-US", "zh-CN"],
-    wordPairs: [
-      ["hello", "你好"],
-      ["world", "世界"],
-      ["brutal", "残酷的"],
-      ["apple", "苹果"],
-      ["banana", "香蕉"],
-      ["orange", "橙子"],
-      ["grape", "葡萄"],
-      ["San Francisco", "旧金山"],
-      ["New York", "纽约"],
-      ["Los Angeles", "洛杉矶"],
-      // ['A Very Very Very Very Very Very Very Long Word', '一个很长很长很长很长很长很长很长很长很长很长的单词']
-      ["Chicago", "芝加哥"],
-      ["Tokyo", "东京"],
-      ["Paris", "巴黎"]
-    ],
-  });
   if (page === "main")
     return (
       <Main