Come eliminare un elemento localStorage quando la finestra / scheda del browser è chiusa?

Il mio caso: localStorage con chiave + valore che deve essere eliminato alla chiusura del browser e non a scheda singola.

Si prega di vedere il mio codice se è corretto e cosa può essere migliorato:

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

dovrebbe essere fatto in questo modo e non con l'operatore di eliminazione:

localStorage.removeItem(key);

Utilizzare con windowla parola chiave globale: -

 window.localStorage.removeItem('keyName');

È possibile utilizzare il beforeunload evento in JavaScript.

Utilizzando JavaScript vaniglia potresti fare qualcosa del tipo:

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

Ciò eliminerà la chiave prima della chiusura della finestra / scheda del browser e richiede di confermare l'azione di chiusura della finestra / scheda. Spero che risolva il tuo problema.

NOTA: il onbeforeunloadmetodo dovrebbe restituire una stringa.

È necessario utilizzare sessionStorage invece se si desidera eliminare la chiave alla chiusura del browser.

Prova a usare

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

Spero che questo funzioni per te

Esiste un caso d'uso molto specifico in cui qualsiasi suggerimento per utilizzare sessionStorage invece di localStorage non aiuta davvero. Il caso d'uso sarebbe qualcosa di semplice come avere qualcosa memorizzato mentre almeno una scheda è aperta, ma invalidarla se si chiude l'ultima scheda rimasta. Se hai bisogno che i tuoi valori siano salvati su campi incrociati e finestre, sessionStorage non ti aiuta se non ti complichi la vita con gli ascoltatori, come ho provato. Nel frattempo localStorage sarebbe perfetto per questo, ma fa il lavoro "troppo bene", poiché i tuoi dati ti aspetteranno anche dopo il riavvio del browser. Ho finito per usare un codice e una logica personalizzati che sfruttano entrambi.

Preferirei spiegare poi dare il codice. Prima memorizza ciò che ti serve in localStorage, poi anche in localStorage crea un contatore che conterrà il numero di schede che hai aperto. Ciò verrà aumentato ogni volta che la pagina viene caricata e diminuito ogni volta che la pagina viene scaricata. Puoi scegliere qui gli eventi da utilizzare, suggerirei "carica" ​​e "scarica". Al momento dello scarico, devi eseguire le attività di pulizia che desideri quando il contatore raggiunge 0, il che significa che stai chiudendo l'ultima scheda. Ecco la parte difficile: non ho trovato un modo affidabile e generico per dire la differenza tra un ricaricamento della pagina o la navigazione all'interno della pagina e la chiusura della scheda. Quindi, se i dati che memorizzi non sono qualcosa che puoi ricostruire al caricamento dopo aver verificato che questa è la tua prima scheda, quindi non è possibile rimuoverlo ad ogni aggiornamento. Invece è necessario memorizzare un flag in sessionStorage ad ogni carico prima di aumentare il contatore delle schede. Prima di memorizzare questo valore, è possibile verificare se ha già un valore e, in caso contrario, significa che si sta caricando in questa sessione per la prima volta, il che significa che è possibile eseguire la pulizia al caricamento se questo il valore non è impostato e il contatore è 0.

usa sessionStorage

L'oggetto sessionStorage è uguale all'oggetto localStorage, tranne per il fatto che memorizza i dati per una sola sessione. I dati vengono eliminati quando l'utente chiude la finestra del browser.

L'esempio seguente conta il numero di volte in cui un utente ha fatto clic su un pulsante, nella sessione corrente:

Esempio

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

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

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Sebbene alcuni utenti abbiano già risposto a questa domanda, sto fornendo un esempio di impostazioni dell'applicazione per risolvere questo problema.

Ho avuto lo stesso problema. Sto usando https://github.com/grevory/angular-local-storage modulo nella mia applicazione angularjs. Se configuri l'app nel modo seguente, salverà la variabile nella memoria della sessione anziché nella memoria locale. Pertanto, se si chiude il browser o si chiude la scheda, l'archiviazione della sessione verrà rimossa automaticamente. Non devi fare nulla.

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

Spero che possa essere d'aiuto.

Esistono cinque metodi tra cui scegliere:

• setItem (): aggiungi chiave e valore a localStorage
• getItem (): recupera un valore dalla chiave da localStorage
• removeItem (): rimuove un elemento per chiave da localStorage
• clear (): cancella tutto localStorage
• key (): passato un numero per recuperare l'ennesima chiave di un localStorage

È possibile utilizzare clear (), questo metodo quando viene richiamato cancella l'intero archivio di tutti i record per quel dominio. Non riceve alcun parametro.

window.localStorage.clear();

Ecco un semplice test per vedere se hai il supporto del browser quando lavori con l'archiviazione locale:

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

Ha funzionato per me come previsto (utilizzo Google Chrome). Adattato da: http://www.w3schools.com/html/html5_webstorage.asp .

Non credo che la soluzione qui presentata sia corretta al 100% perché l'evento window.onbeforeunload viene chiamato non solo quando il browser / Tab è chiuso (CHE È RICHIESTO), ma anche su tutti gli altri eventi diversi. (CHE NON PUO 'ESSERE RICHIESTO)

Vedere questo collegamento per ulteriori informazioni sull'elenco degli eventi che possono attivare window.onbeforeunload: -

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

perché non usare sessionStorage?

"L'oggetto sessionStorage è uguale all'oggetto localStorage, tranne per il fatto che memorizza i dati per una sola sessione. I dati vengono eliminati quando l'utente chiude la finestra del browser."

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

Dopo aver esaminato questa domanda 6 anni dopo che è stata posta, ho scoperto che non esiste ancora una risposta sufficiente a questa domanda; che dovrebbe raggiungere tutto quanto segue:

• Cancella archiviazione locale dopo aver chiuso il browser (o tutte le schede del dominio)
• Conserva memoria locale tra le schede, se almeno una scheda rimane attiva
• Conserva memoria locale quando si ricarica una singola scheda

Esegui questo pezzo di javascript all'inizio di ogni caricamento della pagina per ottenere quanto sopra:

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

Modifica: l'idea di base qui è la seguente:

1. Quando si inizia da zero, all'archivio sessioni viene assegnato un ID casuale in una chiave chiamata tabid
2. La memoria locale viene quindi impostata con una chiave chiamata tabscontenente un oggetto quella chiavetabid è impostata su 1.
3. Quando la scheda viene scaricata, la memoria locale tabsviene aggiornata in un oggetto contenentetabid impostato su 0.
4. Se la scheda viene ricaricata, viene prima scaricata e ripresa. Poiché tabidesiste la chiave di archiviazione della sessione , così come la tabschiave di archiviazione locale con una sottochiave ditabid memoria locale non viene cancellata.
5. Quando il browser viene scaricato, tutta la memoria della sessione verrà cancellata. Quando si riprende, l'archiviazione della sessione tabidnon esiste più e tabidne verrà generata una nuova . Poiché la memoria locale non ha una sottochiave per questo tabid, né nessun altrotabid (tutte le sessioni sono state chiuse), viene cancellata.
6. Su una nuova scheda creata, tabidviene generata una nuova memoria di sessione, ma poiché esiste almeno una tabs[ tabid], la memoria locale non viene cancellata

Questa è una vecchia domanda, ma sembra che nessuna delle risposte sopra riportate sia perfetta.

Nel caso in cui si desideri archiviare l'autenticazione o qualsiasi informazione sensibile che viene distrutta solo alla chiusura del browser, è possibile fare affidamento su sessionStoragee localStorageper il passaggio di messaggi a campi incrociati.

Fondamentalmente, l'idea è:

1. Si avvia bootstrap da nessuna scheda precedente aperta, quindi sia tuo localStorageche sessionStoragevuoto sono (in caso contrario, è possibile cancellare il localStorage). Dovrai registrare un listener di eventi messaggio sul localStorage.
2. L'utente autentica / crea informazioni sensibili su questa scheda (o qualsiasi altra scheda aperta sul tuo dominio).
3. Si aggiorna sessionStorageper archiviare le informazioni riservate e si utilizza localStorageper archiviare queste informazioni, quindi cancellarle (non ti interessa il tempismo qui, poiché l'evento è stato messo in coda quando i dati sono cambiati). Qualsiasi altra scheda aperta in quel momento verrà richiamata sull'evento messaggio e aggiornerà la lorosessionStorage informazioni sensibili.
4. Se l'utente apre una nuova scheda sul tuo dominio, sessionStoragesarà vuota. Il codice dovrà impostare una chiave in localStorage(per esempio:) req. Qualsiasi (tutte) altre schede verranno richiamate nell'evento del messaggio, vedrai quella chiave e potranno rispondere con le informazioni sensibili dal loro sessionStorage(come in 3), se ne hanno.

Si noti che questo schema non dipende da window.onbeforeunloadeventi fragili (poiché il browser può essere chiuso / bloccato senza che questi eventi vengano attivati). Inoltre, il tempo in cui le informazioni sensibili vengono archiviate sulocalStorage è molto ridotto (poiché si fa affidamento sul rilevamento delle modifiche dei transitori per l'evento del messaggio a schede incrociate), quindi è improbabile che tali informazioni sensibili perdano sul disco rigido dell'utente.

Ecco una demo di questo concetto: http://jsfiddle.net/oypdwxz7/2/

Non esiste un modo per rilevare la chiusura del browser, quindi probabilmente non è possibile eliminare localStorage alla chiusura del browser, ma esiste un altro modo per gestire le cose che è possibile utilizzare sessionCookies in quanto si distruggerà dopo la chiusura del browser. Questo è quello che ho implementato nel mio progetto.

Puoi semplicemente usare sessionStorage. Perché sessionStorage consente di cancellare tutto il valore chiave quando la finestra del browser verrà chiusa.

Vedi qui: SessionStorage- MDN

puoi provare il seguente codice per eliminare la memoria locale:

delete localStorage.myPageDataArr;