Vue.Js, Nuxt.js Multi-steps form - how to presist data on page reload

Question

I have a 3-steps form, Now I'm using 3 diffrenet pages for each step. each step requires a submit to the backend for doing some validations and calculations that is then send to the next step.

The problem is, say that a use filled the first step and go to the second step, if he reloads the page on the 2nd step, the data from the first step will be removed from the Vuex store, and on the last step when he submit the form he will get an error because that data from the first step is no longer availabe on the Vuex store. also If he press the back button on any step, the form on the previous step will be cleared out and the data will not be there.

I can use localStorage and save the data for each step on it, but the problem with this appraoch is some data are sensitive and I don't want to store sensitive data on localStorage. the second problem with this approach is the data will always be in the form and will not be cleared if the user closes the browser or anything like that.

What is a good way to fix this issues?

Answer 1

As an alternate to localStorage, session storage can be used.

Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.

• A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.

• Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.

• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

• Duplicating a tab copies the tab's sessionStorage into the new tab. Closing a tab/window ends the session and clears objects in
  sessionStorage.

Taken form https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage