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