Wie kann man ein localStorage-Element löschen, wenn das Browserfenster/der Tab geschlossen wird?

Question

Mein Fall: localStorage mit Schlüssel + Wert, der gelöscht werden soll, wenn der Browser geschlossen wird und nicht ein einzelner Tab.

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;
});

Answer 1

SessionStorage verwenden

Das sessionStorage-Objekt entspricht dem localStorage-Objekt, mit dem Unterschied, dass es die Daten für nur eine Sitzung speichert. Die Daten werden gelöscht, wenn der Benutzer das Browserfenster schließt.

Im folgenden Beispiel wird gezä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.";

Answer 2

Es gibt einen sehr speziellen 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 eine Registerkarte geöffnet haben, aber es ungültig machen, wenn Sie die letzte verbleibende Registerkarte schließen. Wenn Sie Ihre Werte tab- und fensterübergreifend speichern wollen, hilft Ihnen sessionStorage nicht weiter, es sei denn, Sie verkomplizieren Ihr Leben mit Listenern, wie ich es versucht habe. In der Zwischenzeit wäre localStorage perfekt dafür, aber es macht den Job 'zu gut', da die Daten dort auch nach einem Neustart des Browsers warten. Am Ende habe ich einen benutzerdefinierten Code und eine Logik verwendet, die die Vorteile von beidem nutzt.

Ich erkläre lieber, als Code zu geben. Speichern Sie zunächst, was Sie brauchen, in localStorage, dann auch in localStorage erstellen Sie einen Zähler, der die Anzahl der Registerkarten, die Sie geöffnet haben, enthalten wird. Dieser Zähler wird jedes Mal erhöht, wenn die Seite geladen wird, und jedes Mal verringert, wenn die Seite entladen wird. Sie können sich hier die Ereignisse aussuchen, die Sie verwenden möchten, ich würde "load" und "unload" vorschlagen. Zum Zeitpunkt des Entladens müssen Sie die Aufräumarbeiten durchführen, die Sie durchführen möchten, wenn der Zähler 0 erreicht, d. h. wenn Sie die letzte Registerkarte schließen. Jetzt kommt der schwierige Teil: Ich habe keinen zuverlässigen und allgemeinen Weg gefunden, um den Unterschied zwischen einem Neuladen der Seite oder einer Navigation innerhalb der Seite und dem Schließen der Registerkarte zu erkennen. Wenn die Daten, die Sie speichern, nicht etwas sind, das Sie beim Laden neu aufbauen können, nachdem Sie überprüft haben, dass dies Ihre erste Registerkarte ist, dann 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 prüfen, ob er bereits einen Wert hat, und wenn nicht, dann nicht, bedeutet dies, dass Sie zum ersten Mal in diese Sitzung laden, was bedeutet, dass Sie die Bereinigung beim Laden durchführen können, wenn dieser Wert nicht gesetzt ist und der Zähler 0 ist.

Answer 3

Versuchen Sie es mit

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

Ich hoffe, das funktioniert für Sie

Answer 4

8,5 Jahre sind vergangen und die ursprüngliche Frage wurde nie wirklich beantwortet.

wenn der Browser geschlossen ist und nicht eine einzelne Registerkarte.

Dieser einfache Codeschnipsel bietet Ihnen das Beste aus beiden Welten. Eine Speicherung, die nur so lange besteht, wie die Browser-Sitzung dauert ( wie sessionStorage ), kann aber auch zwischen Registerkarten ausgetauscht werden ( localStorage ).

Sie tut dies ausschließlich über localStorage.

function cleanup(){
    // place whatever cleanup logic you want here, for example:
    // window.localStorage.removeItem('my-item')
}

function tabOpened(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === null) {
        window.localStorage.setItem('tabs', 1)
    } else {
        window.localStorage.setItem('tabs', ++tabs)
    }
}

function tabClosed(){
    const tabs = JSON.parse(window.localStorage.getItem('tabs'))
    if (tabs === 1) {
        // last tab closed, perform cleanup.
        window.localStorage.removeItem('tabs')
        cleanup()
    } else {
        window.localStorage.setItem('tabs', --tabs)
    }
}

window.onload = function () {
    tabOpened();
}

window.onbeforeunload = function () {
    tabClosed();
}

Answer 5

Sie haben die Wahl zwischen fünf Methoden:

• setItem(): Schlüssel und Wert zu localStorage hinzufügen
• getItem(): Abrufen eines Wertes anhand des Schlüssels aus localStorage
• removeItem(): Ein Element nach Schlüssel aus localStorage entfernen
• clear(): Löschen des gesamten localStorage
• key(): Übergabe einer Zahl zum Abrufen des n-ten Schlüssels eines localStorage

Sie können clear() verwenden. Diese Methode löscht bei ihrem Aufruf den gesamten Speicher aller Datensätze für diese Domäne. Sie erhält keine Parameter.

window.localStorage.clear();