title: Vuejs, components and cache
body: <p>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)</p>
  <p>While it works fine, i'm looking for a way to have all the cached data in one localStorage entry (in JSON)</p>
  <p>The problem is i can't figure out how to build the JSON tree without overriding previous item. Let me explain :</p>
  <p>On my dashboard, I have two components, one that load categories, the other loading last articles. Each component uses a different endpoint.</p>
  <p>this is how i set cache (for categories) :</p>
  <pre><code>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(&quot;Something went wrong (&quot; + response.status + &quot;)&quot;);
          return Promise.reject(response);
        }
      },
      setUrl(url) {
        return decodeURI(url.substring(url.indexOf('-') + 1))
      }
    },
  </code></pre>
  <p>for articles :</p>
  <pre><code>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(&quot;Something went wrong (&quot; + response.status + &quot;)&quot;);
          return Promise.reject(response);
        }
      },
      setUrl(url) {
        return decodeURI(url.substring(url.indexOf('-') + 1))
      }
    },
  </code></pre>
  <p>this results in two entries in the sessionStorage :</p>
  <p><a href="https://i.stack.imgur.com/3WLoq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3WLoq.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/IsQQf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IsQQf.png" alt="enter image description here" /></a></p>
  <p>I want only one item, let's say 'zhc_cache', in which i can update data while components load..</p>
  <p>for example : dashboard: {
  categories: {
  ......
  },
  articles: {
  ......
  }
  }</p>
  <p>I think there's something going on with the async function, but i can't figure it out,</p>
  <p>any help will be appreciated :)</p>
  <p>Thanks</p>