Here’s an high-level overview of local storage, popular options to get started on local storage in Vue, and how to choose an option that works for you.
Local Storage and Browsers
Browsers are windows to your web application. While it is easier to manage data access on your own servers, super secure and all, getting users to connect to the server for each and every task can be tiring and lead to a bad user experience. These are some use cases that highlight such problems -
- Save data on a form that is not submitted yet
- Save device-specific user preferences that are transient in nature (e.g. show image in portrait mode on mobile phones)
- Provide limited browsing capabilities and user interaction even when user is offline (using PWA for example)
The obvious answers to such problems is to enable a “database” accessible by the web apps but present on the local device. But, this is made complicated by the nature of the web.
In the days of the old wild west, the only solution to storing local data was through “cookies”. Any and all local data including authentication, user preferences and what not were stored as key-value pairs in a file specific to the domain and managed by the browser. Cookies were good, but -
- Had limited storage
- Had to be included in every server request - irrelevant for non-auth data
- A few more problems of the old web that we are too afraid to get into
HTML5 upped the ante in the space by standardizing the way to store and manage data locally - affectionately called “local storage”. While local storage continues to store name-value pairs in some remote files, it has a few advantages over the older solution -
- No sending stuff to server. Local store is for local usage (unless you decide to do that for your own purposes)
- Higher storage limit - 5 MB for each domain + protocol
- Did I mention that the APIs for local store are standard across browsers?
In the above example
count would have reset every time the browser is refreshed - unless you stored it server-side or persisted it in cookies. With
count is stored in the local store, not sent to the server with each request, and fully accessible by the application. You can open the console to see
count being incremented with each browser refresh.
Vue and Local Storage
I know it is difficult to believe that since it seems so magical, but it is true. Vue brings reactivity, a great way to manage user experience, and easier way to manage states.
There are varying degrees of.. ahem, sophistication you can bring to work with local storage in Vue.
1. Directly Work with LocalStorage in Vue
Dealing with local storage is simple in Vue. But, before we get into that let’s see how “normal” code looks like.
Here’s a simple html template -
And.. the Vue script..
You will see this beautiful page.
You can see however, that the count is lost each time the browser is refreshed.
Let us improve it by introducing
localStorage (with a slightly different syntax as compared to the previous example).
Now each time you refresh you continue seeing the same value in
countstore is persistent and increments with each view.
2. Use a Package to Manage Variables in Components
While Vue works just fine with the above option, using variables within Vue components get mighty inconvenient. A cleaner approach may be to use one of the packages that abstract away the local storage.
Let us see an example by using Vue LS, a popular package that makes the local store available through a Vue prototype.
The results are same as earlier. You can use Vue-LS (or a comparable alternative) in components, mixins, or any other part of Vue.
3. Use Vuex + Local Store
Vuex is the state management library for Vue. It vastly simplifies a central storage location that is accessible from any Vue component.
Rewriting our script using Vuex..
It is very much possible to use
vue-ls (or comparable solutions) with Vuex. All you need to do is to keep getting and setting variables every time a state is changed.
As you can imagine, setting tens (or hundreds?) of variables is not quite a fun thing to do.
vuex-persist that automatically synchronize vuex states with local storage.
We will look at an example of using vuex-persistedstate. Just add a single line to include the
createPersistedState plugin while defining the store. Rest of the code in the Vuex example will remain as-is.
Refresh the browser and you see
countstore being persisted across sessions.
Which option is better?
We saw three ways of working with local store in Vue. You may start from the simplest option or choose one that fits your project.
- If I am working with simple Vue frontend and don’t quite have anything to do with managing state, I would use a solution like
vue-ls. It makes things easier and everyone loves tidy code.
- If I am working with Vuex, I invariably gravitate towards
vuex-persist. I tend to work with states that need to persist across sessions - storing state in local store gives me a “clean” way to get stuff done quickly
While I am not saying everyone should choose Vuex, I encourage everyone to carefully evaluate their situation and always choose the hammer that is Vuex (
/s). Pair it with one of the ‘store persistence’ solutions and you will never regret getting into web development :).