vuejs - Keep Form data when browser back

Simply you can use keep-alive in Vue js to cache states on back action. For more information: https://v2.vuejs.org/v2/api/#keep-alive

keep alive support in Vue2 and also Vue3, but the syntax is different. Also you can use in Nuxt.

For better performance you should limit components to be caches by "max" and "include" props.

you can use in layout or only wrap components:

Wrap in layout:

 <keep-alive> <router-view :key="$route.fullPath"></router-view> </keep-alive> 

Wrap components to cache:

<keep-alive> <product-list></product-list> </keep-alive> 

Nuxt:

<template> <div> <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'],max:3 }" /> </div> </template> 

** Keep alive should be in the same layout(if you use keep alive in layout).

** If you destroy keep alive cache, the caching will not work anymore.

** You can control cache with "key" props. For same "key" component will show from cache.

** Keep alive only cache states. So for keep scroll, you should store last position as state and set scroll position on activated hook.

** Lifecycle doesn't work on cache mode and you should use activated and deactivated hooks.

The HTML5 History API seems made for this.

When formdata is changed save it in the history with:

window.history.replaceState(state, ""); 

And when (re)loading the page load from history with

window.history.state 

Or look into window.addEventListener("popstate", function(){...})

E.g. in my listview I use:

 const methods = { saveStateToHistory() { var state = window.history.state || {}; if( ! state[this.id]) { state[this.id] = {}; } state[this.id].currentPage = this.currentPage; state[this.id].currentPerPage = this.currentPerPage; state[this.id].collFilter = this.collFilter; window.history.replaceState(state, ""); }, }; const watch = { currentPage(newdata) { this.saveStateToHistory(); }, currentPerPage(newdata) { this.saveStateToHistory(); }, collFilter(newdata) { this.saveStateToHistory(); }, }; function created() { var state = window.history.state || {}; var myState = state[this.id]; if(myState) { this.currentPage = myState.currentPage; this.currentPerPage = myState.currentPerPage; this.collFilter = myState.collFilter; } }; 

This keeps the current page and selected filters after someone folows a link from the list-view and then uses the browser back-button to go back to the list-view. I'm using state[this.id] to allow for history state from different components in the same page.