Best way to save progress in Vue.js project

Question

I'm currently messing with someone else's project on Vue.js. The project is a webpage in php that asks for the user for his info. Then there is a series of exercises built with vue.js and in the end the results are stored in an excel file.

I've understood the layout of the project and how it works but I have a problem trying to add a new feature. I want to be able to save current progress in the exercises so that someone can continue from the exercise he was last time he opened the page. Every exercise has this code at the end:

handleSubmit(e) {
        e.preventDefault()

        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,
                }

                this.answers.push(result)
            }
        }

        this.addNewAnswer(this.answers)

so everything is added in a object.

At the last exercise there is this code:

const dataToPost = {
            name: this.name,
            age: this.age,
            birthday: this.birthday,
            city: this.city,
            gender: this.gender,
            loginDate: this.loginDate,
            exTimes: this.exTimes,
            totalTime: finalTime.toString(),
            class: classNumber,
            answers: this.finalScores,
        }

        this.axios
            .post(
                'http://***********/setAnswers.php',
                JSON.stringify(dataToPost)
            )
            .then((response) => {
                alert(response.data)
                router.push('/main')
            })

and sends all the answers from all the exercises to another php file that creates the excel file.

What would be the best way to handle state save between each exercise.

Thanks in advance for the suggestions.

Answer 1

You can use localstorage to store the form.

https://fr.vuejs.org/v2/cookbook/client-side-storage.html

And there is an exemple here:

How to update object in local storage in vue js?

You have to stringify and parse the object to respectively store and retrieve it.