Keep state persistent between page reloads

Question

Maybe this is a strange question, but I'm new to Vue and haven't found an answer yet. When I use v-if and v-else everything works fine:

<CodeForm v-if="isLoginFormSent" />
<LoginForm v-else />

But after reloading the page, everything goes back to v-if state. Is there a way to ensure that the v-else status is shown after the page reloads?

Answer 1

When the page is reloaded in a Vue app, the component's state is reset to its initial state and the data properties are returned to their default values, which is why you are encountering this behavior.

If you want to preserve v-else state across page reloads, you can use different strategies, such as persisting state in local or session storage, cookies or URL state like Vue Router).

The easiest way is to save it in localStorage. Please refer to this article to learn how to use localStorage for binding.