Wie lösche ich ein localStorage-Element, wenn das Browserfenster / die Registerkarte geschlossen ist?
Lesezeit: 8 Minuten
Ben
Mein Fall: localStorage mit Schlüssel + Wert, der gelöscht werden soll, wenn der Browser geschlossen wird, und nicht einzelne Registerkarte.
Bitte sehen Sie sich meinen Code an, ob er richtig ist und was verbessert werden kann:
//create localStorage key + value if not exist
if(localStorage){
localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"};
}
//when browser closed - psedocode
$(window).unload(function(){
localStorage.myPageDataArr=undefined;
});
Wenn Sie den lokalen Speicher beim Schließen des Browsers löschen möchten, würde ich Ihre Gründe für die Verwendung hinterfragen.
– Dunhamzzz
30. März ’12 um 14:30 Uhr
Sie können sowohl lokale als auch Sitzungsspeicherobjekte haben. Ich würde sessionStorage für Sitzungswerte verwenden. Übrigens, wenn Sie einen Wert auf undefiniert setzen, wird er nicht gelöscht oder aus localStorage entfernt, es setzt nur seinen Wert auf undefiniert.
– kennebec
30. März 2012 um 15:21 Uhr
@kennebec – Einstellung auf undefined würde jedoch das zuvor gespeicherte Element überschreiben. Aber ja, mit .removeItem() ist angemessener.
– nnnnn
12. Oktober 13 um 7:59 Uhr
Verwenden Sie einfach sessionStorage anstelle von localStorage
– Alberto Acuña
23. Januar 17 um 15:23 Uhr
Benutzen localStorage.clear(); wenn Sie den gesamten Speicher löschen möchten.
– Schwarze Mamba
12. August 17 um 6:40 Uhr
Ben
sollte so gemacht werden und nicht mit dem delete-Operator:
localStorage.removeItem(key);
Warum können wir nicht genau den Löschoperator verwenden? Aus meinen Tests scheint es so zu sein delete localStorage.key funktioniert genauso gut wie localStorage.removeItem(key). Es scheint mir klarer zu sein, delete zu verwenden, wenn ich meine Variablen wie setze localStorage.key = 1 eher, als localStorage.setItem('key', 1).
– Aust
28. Oktober 15 um 21:44 Uhr
Wenn es funktioniert, können Sie es technisch verwenden. Aber wenn man bedenkt, dass removeItem als Member-Funktion bereitgestellt wird, erscheint es logisch, sie zu verwenden, anstatt mit einem separaten Operator auf möglicherweise undefiniertes Verhalten zu stoßen.
– kungpu
17. Februar 16 um 1:37 Uhr
@kungphu denke daran, dass man es immer (aus Versehen) tun kann localStorage.removeItem = null;machen localStorage.removeItem(key); eine möglicherweise schlechte Idee.
– skegse
23. Februar 16 um 5:09 Uhr
Ich sehe nicht, wie das eine vernünftige Eventualität sein soll, die man einplanen kann. Die Tatsache, dass eine Sprache es Menschen erlaubt, destruktive Dinge zu tun, bedeutet nicht, dass Sie nicht standardmäßige Methoden zur Verwendung von Bibliotheken anwenden sollten, um sich gegen den Missbrauch der Sprache zu verteidigen. Wenn Sie oder Ihre Mitentwickler den Unterschied zwischen Aufruf und Zuweisung nicht verstehen, haben Sie viel größere Probleme als die Frage, wie Sie Elemente am besten aus localStorage entfernen.
– kungpu
23. Februar 16 um 7:15 Uhr
@skeggse genau deshalb ist es eine schlechte Idee zu schreiben localStorage.key = 1 in erster Linie – um solche Unfälle zu vermeiden
Schauen Sie sich diesen Link an stackoverflow.com/questions/5319878/…
– vineet
7. März 16 um 6:32 Uhr
Funktioniert diese Lösung wirklich für IE 11? Bitte vorschlagen. Ich habe dieses Problem im eckigen 5-Code.
– Karan
16. November 18 um 10:31 Uhr
Sie sollten stattdessen den Sitzungsspeicher verwenden, wenn Sie möchten, dass der Schlüssel beim Schließen des Browsers gelöscht wird.
Dies ist die beste Antwort; sessionStorage ist das Heilmittel für das, was der Fragesteller beschreibt.
– Benny Nachtigall
9. November 13 um 22:15 Uhr
+1 für die Erwähnung sessionStorageaber die Entwurf des W3C-Editors sagt: ‘Die Lebensdauer eines Browsing-Kontexts kann unabhängig von der Lebensdauer des eigentlichen Benutzeragentenprozesses selbst sein, da der Benutzeragent möglicherweise die Wiederaufnahme von Sitzungen nach einem Neustart unterstützt.’
– Tamás
30. Januar 14 um 0:14 Uhr
Problem mit ‘sessionStorage’ ist, dass es nicht gespeichert wird, wenn Sie einen neuen Tab öffnen, zum Beispiel mit Strg auf einen Link klicken. Ich brauche einen localStorage/sessionStorage-Hybrid lol.
– Edwin Stoteler
24. März 15 um 13:04 Uhr
@EdwinStoteler Ich auch. Ich bin irgendwie verwirrt, was sie sich dabei gedacht haben, als sie es so entworfen haben. Ich benötige im Wesentlichen Zugriff auf einen In-Memory-Browserspeicher, der beim Schließen des Browsers zerstört wird. Ich möchte vertrauliche Informationen so speichern, dass über eine gesamte Domäne darauf zugegriffen werden kann, aber ich möchte nicht, dass diese Informationen irgendwelche Festplatten treffen.
– BT
4. April 16 um 19:05 Uhr
MT.
Sie können die verwenden beforeunload Ereignis in JavaScript.
Dadurch wird der Schlüssel gelöscht, bevor das Browserfenster / die Registerkarte geschlossen wird, und Sie werden aufgefordert, die Aktion zum Schließen des Fensters / der Registerkarte zu bestätigen. Ich hoffe, das löst Ihr Problem.
Beachten Sie das onbeforeunload Die Methode sollte einen String zurückgeben.
Es gibt einen sehr spezifischen Anwendungsfall, in dem jeder Vorschlag, sessionStorage anstelle von localStorage zu verwenden, nicht wirklich hilft. Der Anwendungsfall wäre etwas so Einfaches wie etwas zu speichern, während Sie mindestens einen Tab geöffnet haben, es aber ungültig machen, wenn Sie den letzten verbleibenden Tab schließen. Wenn Sie möchten, dass Ihre Werte in Kreuztabellen und Fenstern gespeichert werden, hilft Ihnen sessionStorage nicht weiter, es sei denn, Sie komplizieren Ihr Leben mit Zuhörern, wie ich es versucht habe. Dafür wäre mittlerweile localStorage perfekt, aber es macht den Job “zu gut”, da Ihre Daten auch nach einem Neustart des Browsers dort warten. Am Ende habe ich einen benutzerdefinierten Code und eine Logik verwendet, die beides nutzt.
Ich würde lieber erklären, als Code zu geben. Speichern Sie zuerst, was Sie in localStorage benötigen, und erstellen Sie dann auch in localStorage einen Zähler, der die Anzahl der von Ihnen geöffneten Registerkarten enthält. Diese wird bei jedem Laden der Seite erhöht und bei jedem Entladen der Seite verringert. Sie können hier die zu verwendenden Ereignisse auswählen, ich würde “laden” und “entladen” vorschlagen. Zum Zeitpunkt des Entladens müssen Sie die Bereinigungsaufgaben ausführen, die Sie ausführen möchten, wenn der Zähler 0 erreicht, was bedeutet, dass Sie den letzten Tab schließen. Hier kommt der knifflige Teil: Ich habe keinen zuverlässigen und generischen Weg gefunden, um den Unterschied zwischen einem Seitenneuladen oder einer Navigation innerhalb der Seite und dem Schließen des Tabs zu erkennen. Wenn die von Ihnen gespeicherten Daten also nicht etwas sind, das Sie beim Laden neu erstellen können, nachdem Sie überprüft haben, dass dies Ihre erste Registerkarte ist, können Sie sie nicht bei jeder Aktualisierung entfernen. Stattdessen müssen Sie bei jedem Laden ein Flag in sessionStorage speichern, bevor Sie den Tab-Zähler erhöhen. Bevor Sie diesen Wert speichern, können Sie überprüfen, ob er bereits einen Wert hat, und wenn dies nicht der Fall ist, bedeutet dies, dass Sie zum ersten Mal in diese Sitzung laden, was bedeutet, dass Sie die Bereinigung beim Laden durchführen können, wenn dies der Fall ist Wert ist nicht gesetzt und der Zähler ist 0.
Als Antwort auf die Frage “Warum nicht SessionStorage verwendet?” Ansatz, auch von w3schools.com/html/html5_webstorage.asp : “window.sessionStorage – speichert Daten für eine Sitzung (Daten gehen verloren, wenn die Registerkarte geschlossen wird)”. Die Antwort ist also genau das. sessionStorage ist nutzlos, wenn Sie selbst in dem von mir beschriebenen Anwendungsfall etwas Dauerhaftes wollen.
– Soltun
13. März 15 um 13:07 Uhr
Ich denke, die beste Implementierung dafür wäre ein browserWatcher-Dienst, der im Grunde Ereignisse auslöst, auf die andere Komponenten hören können (z. B. Browser-Öffnen, Browser-Schließen, Browser-Laden, Browser-Entladen usw.) und alle diese Implementierungsdetails darin verstecken .Jede Komponente kann entscheiden, welche Ereignisse sie verarbeiten muss, um ihre Arbeit zu erledigen.Meine einzige Frage wäre, was passiert, wenn die Stromversorgung der Maschine unterbrochen wird oder so etwas, dann würden diese Eigenschaften beim nächsten Öffnen des Browsers in localStorage bleiben, oder? ?
Als Antwort auf die Frage “Warum nicht SessionStorage verwendet?” Ansatz, auch von w3schools.com/html/html5_webstorage.asp : “window.sessionStorage – speichert Daten für eine Sitzung (Daten gehen verloren, wenn die Registerkarte geschlossen wird)”. Die Antwort ist also genau das. sessionStorage ist nutzlos, wenn Sie selbst in dem von mir beschriebenen Anwendungsfall etwas Dauerhaftes wollen.
– Soltun
13. März 15 um 13:07 Uhr
Ich denke, die beste Implementierung dafür wäre ein browserWatcher-Dienst, der im Grunde Ereignisse auslöst, auf die andere Komponenten hören können (z. B. Browser-Öffnen, Browser-Schließen, Browser-Laden, Browser-Entladen usw.) und alle diese Implementierungsdetails darin verstecken .Jede Komponente kann entscheiden, welche Ereignisse sie verarbeiten muss, um ihre Arbeit zu erledigen.Meine einzige Frage wäre, was passiert, wenn die Stromversorgung der Maschine unterbrochen wird oder so etwas, dann würden diese Eigenschaften beim nächsten Öffnen des Browsers in localStorage bleiben, oder? ?
– pFragen123
7. Juni 16 um 14:11 Uhr
DilanG
SessionStorage verwenden
Das sessionStorage-Objekt entspricht dem localStorage-Objekt, außer dass es die Daten nur für eine Sitzung speichert. Die Daten werden gelöscht, wenn der Benutzer das Browserfenster schließt.
Das folgende Beispiel zählt, wie oft ein Benutzer in der aktuellen Sitzung auf eine Schaltfläche geklickt hat:
Beispiel
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
Die Daten werden beim Schließen des Browser-Tabs gelöscht.
– Kosmonaft
20. September 18 um 1:33 Uhr
sessionStorage wird nicht zwischen Tabs geteilt; es ist nicht gleich localStorage.
– Richard Dunn
15. Oktober 20 um 10:37 Uhr
.
7576600cookie-checkWie lösche ich ein localStorage-Element, wenn das Browserfenster / die Registerkarte geschlossen ist?yes
Wenn Sie den lokalen Speicher beim Schließen des Browsers löschen möchten, würde ich Ihre Gründe für die Verwendung hinterfragen.
– Dunhamzzz
30. März ’12 um 14:30 Uhr
Sie können sowohl lokale als auch Sitzungsspeicherobjekte haben. Ich würde sessionStorage für Sitzungswerte verwenden. Übrigens, wenn Sie einen Wert auf undefiniert setzen, wird er nicht gelöscht oder aus localStorage entfernt, es setzt nur seinen Wert auf undefiniert.
– kennebec
30. März 2012 um 15:21 Uhr
@kennebec – Einstellung auf
undefined
würde jedoch das zuvor gespeicherte Element überschreiben. Aber ja, mit.removeItem()
ist angemessener.– nnnnn
12. Oktober 13 um 7:59 Uhr
Verwenden Sie einfach sessionStorage anstelle von localStorage
– Alberto Acuña
23. Januar 17 um 15:23 Uhr
Benutzen
localStorage.clear();
wenn Sie den gesamten Speicher löschen möchten.– Schwarze Mamba
12. August 17 um 6:40 Uhr