Wie lösche ich ein localStorage-Element, wenn das Browserfenster/die Registerkarte geschlossen ist?

Sie können das Ereignis beforeunload in JavaScript verwenden.

Mit Vanilla JavaScript können Sie beispielsweise Folgendes tun:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

Dadurch wird der Schlüssel vor dem Schließen des Browserfensters/der Registerkarte gelöscht und Sie werden aufgefordert, die Aktion zum Schließen der Fenster/Registerkarte zu bestätigen. Ich hoffe das löst dein Problem.

HINWEIS: Die onbeforeunload-Methode sollte eine Zeichenfolge zurückgeben.

Verwenden Sie das globale Schlüsselwort window: -

 window.localStorage.removeItem('keyName');

Sie sollten stattdessen sessionStorage verwenden, wenn der Schlüssel beim Schließen des Browsers gelöscht werden soll.

Versuchen Sie es mit 

$(window).unload(function(){
  localStorage.clear();
});

Hoffe, das funktioniert für dich

Es gibt einen sehr speziellen Anwendungsfall, in dem jeder Vorschlag, sessionStorage anstelle von localStorage zu verwenden, nicht wirklich hilfreich ist .. Der Anwendungsfall wäre so einfach wie das Speichern von etwas, während Sie mindestens eine Registerkarte geöffnet haben, aber sie ungültig machen Wenn Sie den letzten verbleibenden Tab schließen ... Wenn Sie Ihre Werte über Kreuz und Tab speichern möchten, hilft sessionStorage nicht, es sei denn, Sie erschweren Ihr Leben mit Zuhörern, wie ich es versucht habe. In der Zwischenzeit localStorage wäre perfekt dafür, aber es erledigt den Job "zu gut", da Ihre Daten selbst nach einem Neustart des Browsers dort warten werden. Ich habe schließlich einen eigenen Code und eine eigene Logik verwendet, die beides nutzt.

Ich würde lieber erklären, dann Code geben. Speichern Sie zunächst das, was Sie in localStorage benötigen, und erstellen Sie anschließend in localStorage einen Zähler, der die Anzahl der geöffneten Registerkarten enthält .. Diese wird bei jedem Laden der Seite erhöht und bei jedem Laden der Seite verringert. Sie können hier die zu verwendenden Ereignisse auswählen. Ich würde vorschlagen, "Laden" und "Entladen" Beim Entladen müssen Sie die Bereinigungsaufgaben ausführen, die Sie möchten, wenn der Zähler erreicht 0, was bedeutet, dass Sie den letzten Tab schließen ... Hier kommt der schwierige Teil: Ich habe keine zuverlässige und generische Methode gefunden, um den Unterschied zwischen dem Neuladen einer Seite oder der Navigation innerhalb der Seite und dem Schließen des Tabs zu erkennen. Wenn die von Ihnen gespeicherten Daten nicht beim Laden wiederhergestellt werden können, nachdem Sie überprüft haben, dass dies Ihre erste Registerkarte ist, können Sie sie nicht bei jeder Aktualisierung entfernen. Sie müssen stattdessen ein Flag in sessionStorage speichern Laden Sie vor dem Erhöhen des Tab-Zählers . Bevor Sie diesen Wert speichern, können Sie prüfen, ob er bereits einen Wert hat. Wenn dies nicht der Fall ist, bedeutet, dass Sie zum ersten Mal in diese Sitzung geladen werden time, was bedeutet, dass Sie die Bereinigung beim Laden durchführen können, wenn dieser Wert nicht festgelegt ist und der Zähler 0 ist.

verwenden Sie sessionStorage

Das sessionStorage-Objekt entspricht dem localStorage-Objekt, speichert jedoch die Daten nur für eine Sitzung. 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.";

Obwohl einige Benutzer diese Frage bereits beantwortet haben, gebe ich ein Beispiel von Anwendungseinstellungen, um dieses Problem zu lösen.

Ich hatte das gleiche Problem. Ich verwende https://github.com/grevory/angular-local-storage - module in meiner anglejs-Anwendung. Wenn Sie Ihre App wie folgt konfigurieren, wird die Variable im Sitzungsspeicher statt im lokalen Speicher gespeichert. Wenn Sie also den Browser schließen oder die Registerkarte schließen, wird der Sitzungsspeicher automatisch entfernt. Sie müssen nichts tun. 

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

Ich hoffe es wird helfen.

warum nicht sessionStorage verwendet?

"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." 

http://www.w3schools.com/html/html5_webstorage.asp

Ich denke nicht, dass die hier vorgestellte Lösung zu 100% korrekt ist, da das window.onbeunload -Ereignis nicht nur aufgerufen wird, wenn der Browser/Tab geschlossen ist (WHAS IS REQUIRED), sondern auch bei allen anderen verschiedenen Ereignissen. (Die möglicherweise nicht erforderlich sind)

Weitere Informationen zur Liste der Ereignisse, die window auslösen können, finden Sie unter diesem Link: -

http://msdn.Microsoft.com/de-de/library/ms536907(VS.85).aspx

        for (let i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
          arr.Push(localStorage.key(i));
        }
      }

for (let i = 0; i < arr.length; i++) {
        localStorage.removeItem(arr[i]);
      }

Hier ist ein einfacher Test, um zu sehen, ob Sie Browser unterstützen, wenn Sie mit lokalem Speicher arbeiten:

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

Es hat für mich wie erwartet funktioniert (ich benutze Google Chrome). Angepasst von: http://www.w3schools.com/html/html5_webstorage.asp .

Nachdem ich diese Frage 6 Jahre nach ihrer Befragung betrachtet hatte, stellte ich fest, dass diese Frage noch nicht ausreichend beantwortet wurde. was alle der folgenden erreichen sollte:

• Löschen Sie den lokalen Speicher nach dem Schließen des Browsers (oder aller Registerkarten der Domäne).
• Lokalen Speicher auf Registerkarten beibehalten, wenn mindestens eine Registerkarte aktiv bleibt
• Lokalen Speicher beibehalten, wenn eine einzelne Registerkarte erneut geladen wird

Führen Sie dieses Javascript am Anfang jeder Seite aus, um die oben genannten Punkte zu erreichen:

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

Edit: Die Grundidee hier ist die folgende:

1. Beim Neustart wird dem Sitzungsspeicher eine zufällige ID in einem Schlüssel namens tabid zugewiesen.
2. Der lokale Speicher wird dann mit einem Schlüssel namens tabs festgelegt, der ein Objekt enthält, dessen Schlüssel tabid auf 1 gesetzt ist.
3. Wenn die Registerkarte entladen wird, wird die tabs des lokalen Speichers auf ein Objekt aktualisiert, das tabid auf 0 enthält. 
4. Wenn die Registerkarte neu geladen wird, wird sie zuerst entladen und fortgesetzt. Da der Schlüssel tabid des Sitzungsspeichers vorhanden ist und der Schlüssel des lokalen Speichers tabs mit einem Unterschlüssel von tabid vorhanden ist, wird der lokale Speicher nicht gelöscht.
5. Wenn der Browser entladen wird, wird der gesamte Sitzungsspeicher gelöscht. Bei der Wiederaufnahme des Sitzungsspeichers existiert tabid nicht mehr und eine neue tabid wird generiert. Da der lokale Speicher weder für diese tabid noch für eine andere tabid (alle Sitzungen wurden geschlossen) über einen Unterschlüssel verfügen, wird dieser gelöscht.
6. Bei einer neu erstellten Registerkarte wird im Sitzungsspeicher eine neue tabid generiert. Da jedoch mindestens eine tabs [tabid] vorhanden ist, wird der lokale Speicher nicht gelöscht

Dies ist eine alte Frage, aber es scheint, als sei keine der obigen Antworten perfekt.

Wenn Sie Authentifizierung oder vertrauliche Informationen speichern möchten, die nur beim Schließen des Browsers zerstört werden, können Sie sich auf sessionStorage und localStorage verlassen.

Grundsätzlich ist die Idee:

1. Sie haben einen Bootstrap, wenn kein vorher geöffneter Tab geöffnet ist. Daher sind sowohl Ihre localStorage als auch Ihre sessionStorage leer (wenn nicht, können Sie die localStorage löschen). Sie müssen einen Nachrichtenereignis-Listener für die Variable localStorage registrieren.
2. Der Benutzer authentifiziert/erstellt eine vertrauliche Information auf dieser Registerkarte (oder einer anderen in Ihrer Domäne geöffneten Registerkarte).
3. Sie aktualisieren die sessionStorage, um die vertraulichen Informationen zu speichern, und verwenden Sie die localStorage, um diese Informationen zu speichern, und löschen Sie sie. (Sie interessieren sich nicht für das Timing, da das Ereignis bei einer Änderung der Daten in die Warteschlange gestellt wurde). Jede andere Registerkarte, die zu diesem Zeitpunkt geöffnet wurde, wird beim Nachrichtenereignis zurückgerufen und aktualisiert ihre sessionStorage mit den vertraulichen Informationen.
4. Wenn der Benutzer eine neue Registerkarte in Ihrer Domäne öffnet, ist die Variable sessionStorage leer. Der Code muss einen Schlüssel in der localStorage setzen (zum Beispiel: req). Alle (alle) anderen Registerkarten werden im Nachrichtenereignis zurückgerufen, siehe diesen Schlüssel, und können mit den vertraulichen Informationen aus ihrer sessionStorage (wie in 3) antworten, wenn sie solche haben.

Bitte beachten Sie, dass dieses Schema nicht von dem window.onbeforeunload-Ereignis abhängt, das zerbrechlich ist (da der Browser geschlossen werden kann, ohne dass diese Ereignisse ausgelöst werden). Die Zeit, in der die vertraulichen Informationen auf der Variablen localStorage gespeichert sind, ist ebenfalls sehr gering (da Sie sich darauf verlassen müssen, dass Transcients die Erkennung für Kreuztabellenachrichtenereignisse ändern), so dass es unwahrscheinlich ist, dass solche vertraulichen Informationen auf der Festplatte des Benutzers lecken.

Hier ist eine Demo dieses Konzepts: http://jsfiddle.net/oypdwxz7/2/