Der beste Ansatz, um localStorage/Sitzung auf Tab/Fenster geschlossen zu halten

Question

Ich fand viel Q & A über das Ausführen von Skripts oder Warnungen beim Schließen der Registerkarte oder des Fensters. Angenommen, Sie authentifizieren sich und möchten Ihre JWT in localStorage (LS) speichern. Solange dein Token lebt, wirst du ihn von LS holen.

Ich möchte mein Token explizit entfernen, wenn ich auf die Registerkarte oder das Fenster (Ctrl + W oder Ctrl + F4 oder Alt + F4)

schließen kam ich auf die Idee, ein Skript auf dem beforeunload meiner Seite wie folgt zu definieren:

<script> 
$(window).on('beforeunload', function(event){ 
    window.localStorage.removeItem("myID"); 
}); 
</script> 

Aber dann habe ich festgestellt, dass bei der Aktualisierung F5 die onbeforeunload ausgeführt wird und ich den LS löschen.

Dann kam ich mit dieser Lösung bis

<script> 
var clearLocalStorage = true; 
$(window).on('keydown', function(event){ 
    if(event.keyCode == 116 || //F5 
     (k == 16 && k == 17 && k == 82) || //Shift + Ctrl + R 
     (k == 17 && k == 82)){ //Ctrl + R 
     clearLocalStorage = false; 
     event.preventDefault(); 
    } 
}); 

$(window).on('beforeunload', function(event){ 
    if(clearLocalStorage){ 
     window.localStorage.removeItem("myID"); 
    } 
}); 
</script> 

Das funktioniert gut mit F5, weil es nicht meinem LS nicht klar, aber wenn ich die Ctrl + R, wird es verlieren mein Token von LS.

Nach der Anmeldung Ich möchte dann auf den LS mein Token halten ....

1. Auf Refresh mit allen Mitteln es Sie tun Ctrl immer das Token von LS halten sollte, auch wenn weitere + R oder Umschalt +Ctrl +R

2. Klicken Sie auf die URL-Adresse des Browsers und drücken Sie Geben Sie ein, um die Seite neu zu laden.

3. Löschen Sie nur, wenn Benutzer die Registerkarte oder das Fenster schließen. Wenn Sie die Registerkarte erneut öffnen, müssen Sie erneut zur Anmeldeseite wechseln.

Ich wollte schon die LS im Moment steuern, das Fenster auf dem onClose Ereignis zu schließen, wie folgt, aber es hat nicht funktioniert, wie ich die LS auf der Konsole der Entwickler-Tool abgefragt ich sehen konnte, Der Token ist immer noch da.

<script> 
    window.onClose = function(){ 
     window.localStorage.removeItem("myID"); 
    } 
</script> 

Ich frage mich, was der beste Ansatz wäre, die LS und Token-Sitzungen zu verwalten, wenn erfrischend und/oder Schließen des Tab oder Fenster mit Jquery, jwt, html nur und AngularJS 1.5?

Vielen Dank im Voraus.

Answer 1

ein terminiertes Ereignis Versuchen:

var clearLocalStorage = true; 
$(window).on('keydown', function(event){ 
    if(event.keyCode == 116 || //F5 
     (k == 16 && k == 17 && k == 82) || //Shift + Ctrl + R 
     (k == 17 && k == 82)){ //Ctrl + R 
     clearLocalStorage = false; 
     event.preventDefault(); 
    } 
}); 

$(window).on('beforeunload', function(event){ 
    setTimeout(function(){ 
    if(clearLocalStorage) 
     window.localStorage.removeItem("myID"); 
    else 
     window.localStorage.persistItem("myID"); // make a persistent item in case 
    }, 10); // I don't recommend anything above 100ms 
});