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

Il mio caso: localStorage con chiave + valore che dovrebbe essere cancellato quando il browser è chiuso e non una singola scheda.

Si prega di consultare 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 quel modo e non con l’operatore delete:

 localStorage.removeItem(key); 

È ansible utilizzare l’evento beforeunload in JavaScript.

Usando JavaScript vaniglia si potrebbe fare qualcosa di simile:

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

Questo cancellerà la chiave prima che la finestra / la scheda del browser sia chiusa e ti chiederà di confermare la chiusura della finestra / azione della scheda. Spero che risolva il tuo problema.

NOTA: il metodo onbeforeunload dovrebbe restituire una stringa.

Utilizzare con la parola chiave globale della window : –

  window.localStorage.removeItem('keyName'); 

Dovresti invece usare sessionStorage se vuoi che la chiave venga cancellata quando il browser si chiude.

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 di utilizzare sessionStorage invece di localStorage non è di grande aiuto. Il caso d’uso sarebbe qualcosa di semplice come avere qualcosa memorizzato mentre è aperta almeno una scheda, ma invalidarla se si chiude l’ultima scheda rimanente. Se hai bisogno che i tuoi valori siano salvati su campi incrociati e windows, 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’, dato che i tuoi dati saranno lì in attesa anche dopo il riavvio del browser. Ho finito per utilizzare un codice e una logica personalizzati che sfruttano entrambi.

Preferirei spiegare quindi dare il codice. In primo luogo memorizzare ciò che è necessario in localStorage, quindi anche in localStorage creare un contatore che conterrà il numero di tabs che è stato aperto. Questo verrà aumentato ogni volta che la pagina viene caricata e diminuita ogni volta che la pagina viene scaricata. Puoi scegliere qui gli eventi da utilizzare, suggerirei di “caricare” e “scaricare”. Nel momento in cui scarichi, devi eseguire le attività di pulizia che desideri quando il contatore raggiunge 0, ovvero stai chiudendo l’ultima scheda. Ecco la parte difficile: non ho trovato un modo affidabile e generico per distinguere tra una pagina di ricarica o la navigazione all’interno della pagina e la chiusura della scheda. Quindi, se i dati che archivi non sono qualcosa che puoi ribuild sul carico dopo aver controllato che questa è la tua prima scheda, allora non puoi rimuoverla ad ogni aggiornamento. Invece è necessario memorizzare un flag in sessionStorage ad ogni caricamento prima di aumentare il contatore di tabulazioni. Prima di memorizzare questo valore, puoi fare un controllo per vedere se ha già un valore e, in caso contrario, significa che stai caricando questa sessione per la prima volta, il che significa che puoi eseguire la pulizia al caricamento se questo il valore non è impostato e il contatore è 0.

usa sessionStorage

L’object sessionStorage è uguale all’object localStorage, tranne per il fatto che memorizza i dati per una sola sessione. I dati vengono cancellati 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."; 

Ecco un semplice test per verificare se hai il supporto del browser quando lavori con lo storage 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 (io uso Google Chrome). Adattato da: http://www.w3schools.com/html/html5_webstorage.asp .

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

Vedi questo link per maggiori informazioni sull’elenco degli eventi che possono far scattare window.onbeforeunload: –

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

perché non usato sessionStorage?

“L’object sessionStorage è uguale all’object localStorage, tranne per il fatto che memorizza i dati per una sola sessione, i dati vengono cancellati quando l’utente chiude la finestra del browser.”

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

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

Ho avuto lo stesso problema. Sto usando il modulo https://github.com/grevory/angular-local-storage nella mia applicazione angularjs. Se configuri la tua app come segue, salverà la variabile nella memoria di sessione invece della memoria locale. Pertanto, se chiudi il browser o chiudi la scheda, la memorizzazione della sessione verrà rimossa automaticamente. Non devi fare nulla.

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

Spero che ti sarà d’aiuto.

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

puoi provare il seguente codice per eliminare la memoria locale:

 delete localStorage.myPageDataArr; 

Funzionerà come un incantesimo se usi AngularJS

 $localStorage.$reset();