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;
        })
    }
}

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;
        })
    }
}

• javascript
• node.js
• caching
• vuejs2

• 4 You could store the response of the request in localStorage or sessionStorage together with a timestamp. Then the next time the function is called check if there is a response in your localStorage. If there is any and it is not too old, return it. Else make a new request and store that one. – StackByMe Commented Nov 20, 2020 at 10:37

3 Answers 3

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')

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 ponents 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 remended 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

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).