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

  Travaillez avec moi !

---