Vue.js et localstorage
Afin d’utiliser les données https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series nous allons les récupérés a la création de notre application.
Pour ce faire nous regardons si nous avons dans le localstorage une date de défini ou de moins d’une heure. Si non, nous récupérons à l’aide de fetch les données, convertissons le csv a l’aide de papaparse puis stockons le résultats sous forme de JSON dans le localstorage.
Une fois les 3 fichiers chargés grâce à Promise.all, nous allons vers la route /single.
if (localStorage.date === undefined || localStorage.date < Date.now() - 3600) {
this.$router.push('/');
localStorage.date = Date.now();
Promise.all([
fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')
.then((resp) => resp.text())
.then((data) => {
localStorage.confirmed = JSON.stringify(Papa.parse(data));
}),
fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv')
.then((resp) => resp.text())
.then((data) => {
localStorage.recovered = JSON.stringify(Papa.parse(data));
}),
fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv')
.then((resp) => resp.text())
.then((data) => {
localStorage.death = JSON.stringify(Papa.parse(data));
}),
])
.then(() => this.$router.push('/single'));
}
Le dépôt est accessible sur: https://gitlab.com/dayo/covid19 et l’application: https://dayo.gitlab.io/covid19/single