Vuejs, components and cache

Question

i was looking for a way to 'cache' some API fetched data in my application, and find out it can simply be done with localStorage (or even sessionsStorage)

While it works fine, i'm looking for a way to have all the cached data in one localStorage entry (in JSON)

The problem is i can't figure out how to build the JSON tree without overriding previous item. Let me explain :

On my dashboard, I have two components, one that load categories, the other loading last articles. Each component uses a different endpoint.

this is how i set cache (for categories) :

methods: {
    async getCategories() {

      let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json', {
        method: 'GET',
        headers: zendeskHeaders,
      })

      if (response.status === 200) {
        let data = await response.json();
        this.categories = data.categories

        // Build cache
        let cacheData = []
        cacheData.push(data)
        sessionStorage.setItem('zhc_db_cat_cache', JSON.stringify(cacheData))
      }
      else {
        console.log("Something went wrong (" + response.status + ")");
        return Promise.reject(response);
      }
    },
    setUrl(url) {
      return decodeURI(url.substring(url.indexOf('-') + 1))
    }
  },

for articles :

methods: {
    async getArticles() {

      let response = await fetch('https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json', {
        method: 'GET',
        headers: zendeskHeaders,
      })

      if (response.status === 200) {
        let data = await response.json();
        this.articles = data.articles
        
        // Build cache
        let cacheData = []
        cacheData.push(data)
        sessionStorage.setItem('zhc_db_art_cache', JSON.stringify(cacheData));
      }
      else {
        console.log("Something went wrong (" + response.status + ")");
        return Promise.reject(response);
      }
    },
    setUrl(url) {
      return decodeURI(url.substring(url.indexOf('-') + 1))
    }
  },

this results in two entries in the sessionStorage :

I want only one item, let's say 'zhc_cache', in which i can update data while components load..

for example : dashboard: { categories: { ...... }, articles: { ...... } }

I think there's something going on with the async function, but i can't figure it out,

any help will be appreciated :)

Thanks

Answer 1

If i understand it correctly, you just want one JSON object with categories AND data? In that case, i think you should create an object ("zn_cache"), in which you add categories and articles

//If you want to keep both functions, just set vuejs data variables (categories and articles) and affect them the data you fetched from the api
this.categories = data.categories
this.articles = data.articles

Then you can create a global object with both (check the syntax I'm not 100% sure)

let dashboard = { 'categories' : this.categories, 'articles' : this.articles}

Then you can store this bad boy