Mein Fall: localStorage mit key + value, der gelöscht werden sollte, wenn der Browser geschlossen wird, und nicht nur eine Registerkarte.
Bitte sehen Sie sich meinen Code an, wenn 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;
});
sollte so gemacht werden und nicht mit dem delete Operator
localStorage.removeItem(key);
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."
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:
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:
tabid
zugewiesen.tabs
festgelegt, der ein Objekt enthält, dessen Schlüssel tabid
auf 1 gesetzt ist.tabs
des lokalen Speichers auf ein Objekt aktualisiert, das tabid
auf 0 enthält. 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.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.tabid
generiert. Da jedoch mindestens eine tabs
[tabid
] vorhanden ist, wird der lokale Speicher nicht gelöschtDies 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:
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.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.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/