Is there any way to cache the API response in VueJS

user_13126162 0
Viewed 4663

In our VueJS application, we are having few API's which are calling each and every time whenever the page reloads. In those API's. few response will never change and very few will rarely change. I planning to cache those API calls response and store it in a variable and use it whenever needed and reduce the number of requests when page reloads.

I am new to vueJS and not having any idea how to implement it. Is there anyway to achieve this in VueJS or Javascript? Any help would be most appreciated.

Sample HTML code,

<div class="col-sm-6">
    <span>Is User Available? {{userInfo[is_user_available]}}  </span>
    <span> User Type : {{userType}} </span>
</div>

API call will be like below,

created: function () {
    this.checkForUser();
},
methods: {
    checkForUser: function() {
        this.api.call('user_info', { username : this.username })
        .then((response) => {
            if (response) {
                this.userInfo = response;
                this.userType = this.userInfo['user_type'];
            }
        })
        .catch((error) => {
            this.userInfo.length = 0;
        })
    }
}
vuejs2 node.js caching javascript
3 Answers

If you store the data in a regular Vuex store you will loose it on page refresh unless you use vuex-persistedstate plugin, which saves the store data on the local storage. (here is a working example)

Elaborating on @Mysterywood answer you can simply store it on local storage by yourself.

You can achieve that by simply doing

get:

const userType = window.localStorage.getItem('userInfo')

set:

    window.localStorage.setItem('userInfo', response)

and remove:

    window.localStorage.removeItem('userInfo')
user_112434090

There are few ways of doing this depending on how deep you want to go:

If you just want state to persists during the SPA session, you can do so:

  • Vuex if you would like to store globally accessible state/data. This allows your state to persist regardless of whether the components are destroyed/created.

  • Store it on your root-level Vue instance. If you're using the Vue CLI, this will be in your main.js. You can do something like so:

new Vue({
  // ...
  data: {
    userType: {}
  }
})

You can then access it via this.$root.userType. This is fine for small projects, but generally not recommended as things can get messy very quickly.

  • There's also EventBus, but again, this can get messy very quickly. EventBus is also deprecated in Vue3.

If you want to cache the response and access them again even after the user close their tab/browser, you will want to look into:

  1. Cookies
  2. localStorage
  3. ServiceWorkers
user_109486150

check this, it can help :client-side storage in vuejs

Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with cookies, Local Storage (technically “Web Storage”), IndexedDB, and WebSQL (a deprecated method that should not be used in new projects).

user_150123910
Related