在 Vue JS 中，如何在页面刷新时存储组件的“数据”（真/假）？

Question

Using Vue Js with Laravel I would like to keep open an expanded nav bar when the user refreshes the page (if they have chosen to open it initially).

The nav bar open/close status is stored in the component's data with a true/false boolean.

I'm a bit confused of which approach to take as have researched various options, so seek the best advice as a noob. Ideally there is a simple way to have the 'data' persist in my component rather than it getting re-rendered to the default of false! Therefore I guess it needs storing in the user's "session" state locally right?

But what do I use and how?

• sessionStorage
• localStorage
• Vuex - https://v2.vuejs.org/v2/guide/state-management.html
• a plugin - https://github.com/vuejs/vuex
• Laravel session - https://laravel.com/docs/5.5/session

Thanks.

Answer 1

Vuex with a plugin such as this one if your application is large/is growing in complexity. Its a bit of a learning curve though so if you only have a few things to keep track of their states, then localstorage would be a good solution.

Localstorage has the advantage of being easy to use, widely adopted and if you need to in the future, it integrates nicely with state management systems like vuex. The api is quite simple, really just getItem and setItem for common simple use cases. It persists across browser sessions as well.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Sessionstorage is roughly equivalent to localstorage with the key difference being once you close the browser, it gets wiped.