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

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

Answer 2

Dies ist für Objekte ausreichend.

localStorage.removeItem('key');

Oder

localStorage.setItem('key', 0 );

Answer 3

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

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

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

Ich hoffe, es hilft.

Answer 4

Warum nicht SessionStorage verwenden?

"Das sessionStorage-Objekt entspricht dem localStorage-Objekt, mit dem Unterschied, 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

Answer 5

Nachdem ich mich mit dieser Frage 6 Jahre nachdem sie gestellt wurde, befasst habe, habe ich festgestellt, dass es immer noch keine ausreichende Antwort auf diese Frage gibt, die alle folgenden Punkte erfüllen sollte:

• Löschen des lokalen Speichers nach dem Schließen des Browsers (oder aller Registerkarten der Domäne)
• Lokalen Speicher über Registerkarten hinweg beibehalten, wenn mindestens eine Registerkarte aktiv bleibt
• Lokalen Speicher beibehalten, wenn eine einzelne Registerkarte neu geladen wird

Führen Sie dieses Javascript zu Beginn jedes Seitenaufrufs aus, um das oben genannte Ziel 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');

Bearbeiten: Der Grundgedanke dabei ist folgender:

1. Bei einem Neustart wird dem Sitzungsspeicher eine zufällige ID in einem Schlüssel namens tabid
2. Der lokale Speicher wird dann mit einem Schlüssel namens tabs mit einem Objekt, dessen Schlüssel tabid wird auf 1 gesetzt.
3. Wenn die Registerkarte entladen wird, wird der lokale Speicher tabs wird zu einem Objekt aktualisiert, das tabid auf 0 gesetzt.
4. Wenn die Registerkarte neu geladen wird, wird sie zunächst entladen und dann wieder fortgesetzt. Da der Schlüssel des Sitzungsspeichers tabid existiert, ebenso wie der lokale Speicher tabs Schlüssel mit einem Unterschlüssel von tabid wird der lokale Speicher nicht gelöscht.
5. Wenn der Browser entladen wird, wird der gesamte Sitzungsspeicher geleert. Beim Wiederaufnehmen des Sitzungsspeichers tabid wird nicht mehr existieren und eine neue tabid erzeugt werden. Da der lokale Speicher nicht über einen Unterschlüssel für diesen tabid noch irgendeine andere tabid (alle Sitzungen wurden geschlossen), ist sie gelöscht.
6. Bei einer neu erstellten Registerkarte wird eine neue tabid wird im Sitzungsspeicher erzeugt, aber da mindestens ein tabs [ tabid ] vorhanden ist, wird der lokale Speicher nicht geleert