Détecter la différence entre rafraîchir et recharger

Question

J'ai rempli un formulaire contenant mon nom complet et mon adresse. Lorsque j'appuie sur ⌘R, la page est actualisée, mais le formulaire contient toujours les données que j'ai remplies.

Lorsque je recharge la page Web via le bouton de rechargement en haut à gauche de Google Chrome, le formulaire est vide.

Comment puis-je détecter cette différence avec JavaScript (ou jQuery)?

---

J'ai essayé:

$(window).on('load', function(){ 

    localStorage.setItem('gForm_isDone', '{"0":false,"1":false,"2":false,"3":false,"4":false,"5":false,"6":false,"7":false,"8":false,"9":false,"10":false,"11":false}'); 
    console.log('localStorage emptied'); 

    console.log(localStorage.getItem('gForm_isDone')); 

}); 

Dans mon scénario, je veux vider le localStorage, mais seulement quand la page rechargements, pas quand il rafraîchit.

Answer 1

utilisation de la fonction window.onbeforeunload pour vérifier si l'actualisation/reload est pressé et traité l'événement localStorage.clear()

window.onbeforeunload = function(){ 
var message = 'Are you sure you want to reload?'; 
    if (typeof evt == 'undefined') { 
    evt = window.event; 
    } 
    if (evt) { 
    evt.returnValue = message; 
    } 
    return message; 
} 

Answer 2

Une possibilité est de détecter les performances de la fenêtre à l'aide

if (window.performance) { 
    console.info(performance.navigation.type); 
} 

Il retournera 0 ou 1. 0 pour la page n'est pas rechargé ou appelé avec le cache vide. 1 nous dira que la page est actualisée en utilisant ctrl+R ou en utilisant le bouton du navigateur.

if (window.performance) { 
    console.info("window performance work on browser"); 
} 
    if (performance.navigation.type == 1) { 
    console.info("This page is reloaded"); 
    } else { 
    console.info("This page is not reloaded or just called with empty cache"); 
    }