Détecter le rafraîchissement ou la sortie de la page avec JavaScript
Publié le 21/04/2020 • Actualisé le 21/04/2020
Dans ce bout de code, nous allons voir comment détecter le rafraîchissement ou la sortie de la page courante avec JavaScript. Sur mon projet pomodoro.fun 🍅, il n'y aucune persistance des logs de sessions. Si on rafraichit la page ou si on ferme l'onglet, on perd les données. C'est le comportement souhaité. Néanmoins, il m'est arrivé plusieurs fois de me tromper en confondant mon navigateur de développement avec celui de production. Je voulais donc ajouter une alerte afin d'éviter ça. C'est facile à implémenter grâce au snippet suivant. Rafraîchissez la page ou fermez votre onglet pour tester ⚙.
/**
* J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
* C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
* ou snippetXX().
*/
export default {
mounted () {
if (this.isArticle(87)) {
window.addEventListener('beforeunload', function (e) {
e.preventDefault()
e.returnValue = ''
})
}
}
}
Plus sur Stackoverflow Lire la doc Snippet aléatoire
