After researching ways to 'cache' API fetched data in my application, I discovered that it can be easily achieved using localStorage or sessionStorage.
Although it functions well, I am interested in consolidating all cached data into a single JSON entry within localStorage.
The challenge arises when trying to structure the JSON tree without replacing existing items. Allow me to elaborate:
Within my dashboard, there are two components: one for loading categories and another for displaying the latest articles. Each component utilizes a distinct endpoint.
Here is an example of how I cache 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))
}
},
And here's an example of caching 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 setup creates separate entries in the sessionStorage:
https://i.stack.imgur.com/3WLoq.png https://i.stack.imgur.com/IsQQf.png
I aim to consolidate all data under a single item, let's call it 'zhc_cache', which can be updated as components load...
For instance: dashboard: { categories: { ...... }, articles: { ...... } }
I suspect there may be issues with the asynchronous function, but I have yet to identify the root cause,
Any assistance would be greatly appreciated :)
Thank you