save quiz state

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -31,11 +31,11 @@
       </div>
 
       <div>
-        <span :class="isKoFirst ? '' : 'spoiler'">
+        <span :class="quizState.isKoFirst ? '' : 'spoiler'">
           <SentenceAudio :v="v" lang="ko" ref="vaud" />
         </span>
         <span>{{ " = " }}</span>
-        <span :class="isKoFirst ? 'spoiler' : ''">
+        <span :class="quizState.isKoFirst ? 'spoiler' : ''">
           <SentenceAudio :v="v" lang="en" />
         </span>
       </div>
@@ -46,7 +46,7 @@
             v-if="example"
             :v="example"
             lang="ko"
-            :spoiler="!isKoFirst"
+            :spoiler="!quizState.isKoFirst"
             ref="saud"
           />
           <button
@@ -84,7 +84,7 @@
               type="checkbox"
               name="front"
               role="switch"
-              v-model="isKoFirst"
+              v-model="quizState.isKoFirst"
             />
             <span role="slider"></span>
             <span>EN</span>
@@ -95,7 +95,7 @@
           <input
             type="checkbox"
             name="autoplay-audio"
-            v-model="isAutoplayAudio"
+            v-model="quizState.isAutoplayAudio"
           />
           autoplay sentence audio
         </label>
@@ -111,6 +111,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  reactive,
   ref,
   useTemplateRef,
   watch,
@@ -135,8 +136,10 @@ const exIndex = ref(0);
 const isEdit = ref(false);
 const vEditContent = ref("");
 
-const isAutoplayAudio = ref(true);
+const quizState = reactive({
-const isKoFirst = ref(true);
+  isAutoplayAudio: true,
+  isKoFirst: true,
+});
 
 const modalRef = useTemplateRef("modal");
 const textareaRef = useTemplateRef("textarea");
@@ -156,6 +159,29 @@ const MAX_VOC = 5;
 
 const { frontmatter, page } = useData();
 
+const LOCALSTORAGE_STATE = JSON.stringify([
+  page.value.filePath,
+  fmKey,
+  category,
+]);
+
+if (typeof window !== "undefined" && window.localStorage) {
+  const oldStateString = window.localStorage.getItem(LOCALSTORAGE_STATE);
+  if (oldStateString) {
+    try {
+      Object.assign(quizState, JSON.parse(oldStateString));
+    } catch (e) {}
+  }
+}
+
+function saveQuizState() {
+  window.localStorage.setItem(LOCALSTORAGE_STATE, JSON.stringify(quizState));
+}
+
+watch(quizState, () => {
+  saveQuizState();
+});
+
 const vocabulary: Record<string, IVoc[]> = {};
 
 for (const [k, vs] of Object.entries(
@@ -178,9 +204,12 @@ if (category) {
 
 vChosenCats.value = [...vCats.value];
 
-watch(isKoFirst, () => {
+watch(
+  () => quizState.isKoFirst,
+  () => {
     makeVList();
-});
+  },
+);
 
 watch(isEdit, () => {
   if (isEdit.value) {
@@ -231,7 +260,7 @@ function makeNewExIndex() {
     exIndex.value = newValue >= exIndex.value ? newValue + 1 : newValue;
 
     nextTick(() => {
-      if (saud.value && isAutoplayAudio.value) {
+      if (saud.value && quizState.isAutoplayAudio) {
         saud.value.playAudio();
       }
     });
@@ -244,11 +273,11 @@ function mark(isRight: boolean) {
       sentenceDetails.value.open = false;
     }
 
-    if (isAutoplayAudio.value) {
+    if (quizState.isAutoplayAudio) {
       nextTick(() => {
         if (saud.value) {
           saud.value.playAudio();
-        } else if (vaud.value && isKoFirst.value) {
+        } else if (vaud.value && quizState.isKoFirst) {
           vaud.value.playAudio();
         }
       });