Jak usunąć element localStorage, gdy okno/karta przeglądarki jest zamknięte?

Możesz użyć zdarzenia beforeunload w JavaScript.

Używając vanilla JavaScript możesz zrobić coś w stylu:

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

Spowoduje usunięcie klucza przed zamknięciem okna/karty przeglądarki i poprosi o potwierdzenie operacji zamknij okno / kartę. Mam nadzieję, że to rozwiąże twój problem.

Uwaga: Metoda onbeforeunload powinna zwracać łańcuch znaków.

Użyj window globalnego słowa kluczowego:-

 window.localStorage.removeItem('keyName');

Powinieneś użyć sessionStorage, jeśli chcesz, aby klucz został usunięty po zamknięciu przeglądarki.

Spróbuj użyć

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

Mam nadzieję, że to działa dla ciebie

Istnieje bardzo specyficzny przypadek użycia, w którym sugestie użycia sessionStorage zamiast localStorage nie pomagają. Przypadek użycia byłby czymś tak prostym, jak posiadanie czegoś zapisanego, gdy masz co najmniej jedną kartę otwartą, ale Unieważnij go, jeśli zamkniesz ostatnią kartę pozostałą. Jeśli chcesz, aby twoje wartości zostały zapisane na karcie i oknie, sessionStorage nie pomoże Ci, chyba że skomplikować swoje życie ze słuchaczami, jak próbowałem. W międzyczasie localStorage będzie idealne do tego, ale wykonuje zadanie "zbyt dobrze", ponieważ Twoje dane będą tam czekać nawet po ponownym uruchomieniu przeglądarki. Skończyło się na użyciu niestandardowego kodu i logiki, która wykorzystuje oba.

Raczej wyjaśnię, potem podam kod. Najpierw przechowuj to, czego potrzebujesz w localStorage, a następnie w localStorage Utwórz licznik, który będzie zawierał liczbę otwartych kart. Będzie to zwiększane za każdym razem, gdy Strona się ładuje i zmniejszane za każdym razem, gdy Strona się rozładowuje. Możesz mieć Wybierz tutaj zdarzenia do wykorzystania, proponuję "Załaduj" i "rozładuj". W momencie rozładowywania musisz wykonać zadania czyszczenia, które chcesz, gdy licznik osiągnie 0, co oznacza, że zamykasz ostatnią kartę. Oto trudna część: nie znalazłem niezawodnego i ogólnego sposobu, aby odróżnić przeładowanie strony lub nawigację wewnątrz strony od zamknięcia karty. Więc jeśli przechowywane dane nie są czymś, co można odbudować po załadowaniu po sprawdzeniu, że jest to twój pierwszy tab, a następnie nie można go usunąć przy każdym odświeżaniu. Zamiast tego musisz zapisać flagę w sessionStorage przy każdym obciążeniu przed zwiększeniem licznika kart. Przed zapisaniem tej wartości możesz sprawdzić, czy ma ona już wartość, a jeśli nie, oznacza to, że wczytywasz się do tej sesji po raz pierwszy, co oznacza, że możesz wykonać czyszczenie przy ładowaniu, jeśli ta wartość nie jest ustawiona, a licznik wynosi 0.

Użyj sessionStorage

Obiekt sessionStorage jest równy obiektowi localStorage, z tym wyjątkiem, że przechowuje dane tylko dla jednej sesji. Dane są usuwane po zamknięciu przez użytkownika okna przeglądarki.

Poniższy przykład zlicza liczbę kliknięć przez użytkownika przycisku w bieżącej sesji:

Przykład

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

Oto prosty test, aby sprawdzić, czy masz obsługę przeglądarki podczas pracy z lokalną pamięcią masową:

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

Zadziałało zgodnie z oczekiwaniami (używam Google Chrome). Dostosowany od: http://www.w3schools.com/html/html5_webstorage.asp .

Wydaje mi się, że przedstawione tutaj rozwiązanie nie jest w 100% poprawne, ponieważ window.Zdarzenie onbeforeunload jest wywoływane nie tylko wtedy, gdy przeglądarka/karta jest zamknięta (co jest wymagane), ale także we wszystkich innych zdarzeniach. (CO MOŻE NIE BYĆ WYMAGANE)

Zobacz ten link, aby uzyskać więcej informacji na temat listy zdarzeń, które mogą uruchomić window.onbeforeunload: -

Http://msdn.microsoft.com/en-us/library/ms536907 (VS.85). aspx

Dlaczego nie użyto sessionStorage?

" obiekt sessionStorage jest równy obiektowi localStorage, z tą różnicą, że przechowuje dane tylko dla jednej sesji. Dane są usuwane po zamknięciu przez użytkownika okna przeglądarki."

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

Chociaż niektórzy użytkownicy już odpowiedzieli na to pytanie, podaję przykład ustawień aplikacji, aby rozwiązać ten problem.

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

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

Po obejrzeniu tego pytania 6 lat po jego zadaniu, stwierdziłem, że nadal nie ma wystarczającej odpowiedzi na to pytanie; które powinno osiągnąć wszystkie z następujących:

• Wyczyść lokalny magazyn po zamknięciu przeglądarki (lub wszystkich kart domeny)
• Zachowaj pamięć lokalną między kartami, jeśli przynajmniej jedna karta pozostaje aktywna
• Zachowaj pamięć lokalną podczas przeładowywania pojedynczej karty

Wykonaj ten fragment javascript na początku każdego ładowania strony w kolejności aby osiągnąć powyższe:

((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');

Możesz spróbować wykonać następujący kod, aby usunąć lokalny magazyn:

delete localStorage.myPageDataArr;

To będzie działać jak urok, jeśli używasz AngularJS

$localStorage.$reset();