Vue.js 项目中实现练习进度保存的策略与实践

{
    currentExercise: 1, // 例如，用户在第1个练习
    savedAnswers: [
        { id: 'question1', value: 'answerA', exNumber: 1 },
        { id: 'question2', value: 'answerB', exNumber: 1 },
        // ... 更多答案
    ]
}

// Vue组件示例
export default {
    data() {
        return {
            exNumber: 1, // 当前练习编号，初始化为1
            answers: [], // 存储所有已完成练习的答案
            // ... 其他数据
        };
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();

            // 收集当前练习的答案
            const currentExerciseAnswers = [];
            for (let i = 0; i < e.target.length - 1; i++) {
                if (e.target[i].tagName === 'INPUT') {
                    const result = {
                        id: e.target[i].id,
                        value: e.target[i].value,
                        exNumber: this.exNumber,
                    };
                    currentExerciseAnswers.push(result);
                }
            }

            // 将当前练习的答案添加到总答案列表中
            this.answers.push(...currentExerciseAnswers);

            // 保存进度到 localStorage
            this.saveProgress();

            // 假设这里是切换到下一个练习的逻辑
            // this.exNumber++;
            // this.$router.push(`/exercise/${this.exNumber}`); // 导航到下一个练习
        },
        saveProgress() {
            const progressData = {
                currentExercise: this.exNumber,
                savedAnswers: this.answers,
                // 如果有用户ID，可以添加 userId: this.userId
            };
            try {
                // 使用一个描述性的键名，例如 'vue-exercise-progress'
                localStorage.setItem('vue-exercise-progress', JSON.stringify(progressData));
                console.log('进度已保存');
            } catch (e) {
                console.error('保存进度失败:', e);
                // 可以在这里处理存储空间不足等错误，例如提示用户
            }
        },
        // ... 其他方法
    },
};

// Vue组件示例
export default {
    data() {
        return {
            exNumber: 1,
            answers: [],
            // ...
        };
    },
    created() {
        this.loadProgress();
    },
    methods: {
        // ... handleSubmit, saveProgress
        loadProgress() {
            try {
                const savedProgress = localStorage.getItem('vue-exercise-progress');
                if (savedProgress) {
                    const progressData = JSON.parse(savedProgress);
                    // 恢复练习编号和答案
                    this.exNumber = progressData.currentExercise || 1; // 如果没有保存，默认为1
                    this.answers = progressData.savedAnswers || []; // 如果没有保存，默认为空数组
                    console.log('进度已加载:', progressData);
                    // 根据加载的exNumber，可能需要导航到对应的练习页面
                    // this.$router.push(`/exercise/${this.exNumber}`);
                }
            } catch (e) {
                console.error('加载进度失败或数据损坏:', e);
                // 如果数据损坏，可以考虑清除损坏的数据，避免后续错误
                localStorage.removeItem('vue-exercise-progress');
            }
        },
        // ...
    },
};

// 假设在最后一个练习的提交逻辑中
export default {
    // ...
    methods: {
        // ...
        submitFinalResults() {
            const dataToPost = {
                // ... 用户信息和所有练习的最终答案
                answers: this.finalScores, // 假设 this.finalScores 是所有练习的最终答案
            };

            this.axios
                .post(
                    'http://***********/setAnswers.php', // 你的后端API地址
                    JSON.stringify(dataToPost)
                )
                .then((response) => {
                    alert(response.data);
                    // 最终提交成功后，清除本地保存的进度
                    localStorage.removeItem('vue-exercise-progress');
                    console.log('最终结果提交成功，本地进度已清除。');
                    // 导航到主页或其他完成页面
                    this.$router.push('/main');
                })
                .catch((error) => {
                    console.error('最终结果提交失败:', error);
                    // 提交失败时，通常不清除进度，以便用户可以重试
                    alert('提交失败，请稍后再试。');
                });
        },
    },
    // ...
};