Comment supprimer un localStorage élément lorsque la fenêtre du navigateur/onglet est fermé?
Mon Cas: localStorage avec clé + valeur qui doit être supprimé lorsque le navigateur est fermé et non pas dans un seul onglet.
Veuillez voir mon code si son bon et ce qui peut être amélioré:
//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;
});
- Si vous souhaitez effacer le stockage local lors de la fermeture du navigateur, je ne doute vos raisons pour l'utiliser.
- Vous pouvez avoir à la fois locale et de la session d'objets de stockage - je utiliser sessionStorage pour les valeurs de session. Btw, la définition d'une valeur indéfinie ne pas le supprimer, ou de la supprimer de localStorage, c'est juste définit sa valeur undefined.
- Réglage de
undefined
serait de remplacer la précédemment stocké à l'élément de bien. Mais oui, à l'aide de.removeItem()
est plus approprié. - utilisez simplement sessionStorage au lieu de localStorage
- Utilisation
localStorage.clear();
si vous souhaitez effacer l'ensemble de stockage.
Vous devez vous connecter pour publier un commentaire.
doit être fait comme ça et pas avec l'opérateur d'effacement:
delete localStorage.key
fonctionne tout aussi beau quelocalStorage.removeItem(key)
. Il semble plus clair pour moi à utiliser supprimer lorsque j'ai mis mes variables commelocalStorage.key = 1
plutôt quelocalStorage.setItem('key', 1)
.localStorage.removeItem = null;
, fairelocalStorage.removeItem(key);
potentiellement une mauvaise idée.localStorage.key = 1
en premier lieu - pour éviter ce genre d'accidents$window.on('unload', function(){})
déclenche lors de l'onglet à proximité, donc si je ferme un onglet de ma page, il va supprimer le local de stockage, qui est également utilisé dans un autre onglet. Est-il possible de gérer cela? Je sais qu'il estsessionStorage
, cependant, il ne peut être utilisé que sur un seul onglet (Chrome et Firefox).Utiliser avec
window
mot clé global:-localStorage.removeItem(key)
fonctionne très bien.Vous pouvez faire usage de la
beforeunload
des événements en JavaScript.L'aide de vanille JavaScript vous pourriez faire quelque chose comme:
Qui va supprimer la clé avant que le navigateur de la fenêtre/onglet est fermé et vous invite à confirmer la fermeture de la fenêtre/onglet action. J'espère que cela résout votre problème.
REMARQUE: Le
onbeforeunload
méthode doit retourner une chaîne de caractères.killall firefox
, l'élément ne sera pas supprimé. Si vous utilisez sessionStorage au lieu de localStorage, lors de la fermeture du navigateur complètement et la restauration de la session, j'ai aussi remarqué que vous avez à l'invite d'une boîte d'alerte en retournant une chaîne, car il n'aura pas le temps de retirer l'article, si vous retournez pas défini à la place de ". (testé avec Firefox 62)Vous devez utiliser le sessionStorage à la place si vous voulez la clé pour être supprimés lors de la fermeture du navigateur.
sessionStorage
est le remède à ce que le demandeur a décrit.sessionStorage
, mais le W3C de l'Éditeur de Projet dit: "La durée de vie d'un contexte de navigation peut être sans rapport avec la durée de vie de l'utilisateur réel processus de l'agent lui-même, en tant qu'utilisateur agent en charge la reprise des séances, après un redémarrage.'Essayez d'utiliser
Espérons que cela fonctionne pour vous
localStorage.clear();
Il est d'un usage très spécifique affaire dans laquelle toute suggestion pour l'utilisation sessionStorage au lieu de localStorage n'a pas vraiment l'aider.
Les cas d'utilisation serait quelque chose d'aussi simple que d'avoir quelque chose de stocké pendant que vous avez au moins un onglet ouvert, mais l'invalider si vous fermer le dernier onglet restants.
Si vous avez besoin de sauvegarder les valeurs de la croix-onglet et fenêtre, sessionStorage ne vous aide pas, sauf si vous compliquer la vie avec les auditeurs, comme j'ai essayé.
Dans l'intervalle, localStorage, ce serait parfait pour cela, mais il fait le travail "trop bien", vos données seront en attente de là, même après un redémarrage du navigateur.
J'ai fini à l'aide d'un code personnalisé et une logique qui prend avantage des deux.
Je préfère expliquer puis donner le code. Premier magasin que vous avez besoin dans le localStorage, puis aussi dans localStorage créer un compteur qui contiendra le nombre d'onglets que vous avez ouverts.
Ce sera augmenté à chaque fois que la page se charge et une diminution à chaque fois que la page décharge. Vous pouvez avoir votre choix ici de l'événement à utiliser, je vous suggère de le "charger" et "décharger".
Au moment de vous décharger, vous devez effectuer les tâches de nettoyage que vous souhaitez lorsque le compteur atteint 0, ce qui signifie que vous êtes à la fermeture du dernier onglet.
Voici la partie la plus délicate: je n'ai pas trouvé de fiable et générique de la façon de faire la différence entre un rechargement de la page ou de la navigation à l'intérieur de la page et de la fermeture de l'onglet.
Donc, Si les données que vous stockez n'est pas quelque chose que vous pouvez reconstruire sur la charge après avoir vérifié que c'est votre premier onglet, vous ne pouvez pas l'enlever à chaque actualisation.
Au lieu de cela vous avez besoin de stocker un drapeau dans sessionStorage à chaque chargement avant d'augmenter l'onglet compteur.
Avant de stocker cette valeur, vous pouvez vérifier pour voir si il a déjà une valeur et si ça ne marche pas,
cela signifie que vous êtes en train de charger dans cette session pour la première fois, ce qui signifie que vous pouvez faire le nettoyage à la charge si cette valeur n'est pas définie et que le compteur est à 0.
utilisation sessionStorage
Le sessionStorage objet est égal à l'objet localStorage, sauf qu'il stocke les données pour une seule session. Les données sont supprimés lorsque l'utilisateur ferme la fenêtre du navigateur.
L'exemple suivant permet de compter le nombre de fois où l'utilisateur a cliqué sur un bouton, dans la session en cours:
Exemple
Bien que, certains utilisateurs ont déjà répondu à cette question déjà, je donne un exemple des paramètres de l'application pour résoudre ce problème.
J'ai eu le même problème. Je suis à l'aide de https://github.com/grevory/angular-local-storage module dans mon application angularjs. Si vous configurez votre application comme suit, il vous fera économiser de variable dans la session de stockage lieu de stockage local. Par conséquent, si vous fermez le navigateur ou l'onglet stockage de session sera automatiquement retiré. Vous n'avez pas besoin de faire quoi que ce soit.
Espère que ça va aider.
Voici un test simple pour voir si vous avez de la prise en charge du navigateur lorsque vous travaillez avec des locaux de stockage:
Il a travaillé pour moi comme prévu (j'utilise Google Chrome).
Adapté de: http://www.w3schools.com/html/html5_webstorage.asp.
Je ne pense pas que la solution présentée ici est 100% correct, car la fenêtre.onbeforeunload événement est appelé non seulement lorsque le navigateur/Onglet est fermé(QUI EST NÉCESSAIRE), mais aussi sur tous les autres de plusieurs événements. (QUI POURRAIT NE PAS ÊTRE NÉCESSAIRE)
Voir ce lien pour plus d'informations sur la liste des événements qui peut mettre le feu à la fenêtre.onbeforeunload:-
http://msdn.microsoft.com/en-us/library/ms536907(SV.85).aspx
pourquoi ne pas utilisé sessionStorage?
"Le sessionStorage objet est égal à l'objet localStorage, sauf qu'il stocke les données pour une seule session. Les données sont supprimés lorsque l'utilisateur ferme la fenêtre du navigateur."
http://www.w3schools.com/html/html5_webstorage.asp
Après avoir examiné cette question, 6 ans après, il a été demandé, j'ai trouvé qu'il n'y est toujours pas de réponse satisfaisante à cette question; ce qui devrait atteindre tous les objectifs suivants:
Exécuter ce morceau de code javascript au début de chaque chargement de page pour atteindre la ci-dessus:
Edit: L'idée de base ici est la suivante:
tabid
tabs
contenant un objet essentieltabid
est mis à 1.tabs
est mise à jour à un objet contenanttabid
mis à 0.tabid
existe, et le local de stockagetabs
clé avec une sous-clé detabid
le local de stockage n'est pas effacée.tabid
ne existe plus et un nouveautabid
sera généré. Depuis le local de stockage n'ont pas une sous-clé de cettetabid
, ni aucune autretabid
(toutes les sessions ont été fermés), il est effacé.tabid
est généré dans le stockage de session, mais depuis au moins untabs
[tabid
] existe, le local de stockage n'est pas effacéewindow.onbeforeunload
ne sera pas appelé, et le localtabs[tabid]
ne sera pas mis à 0 => le local de stockage ne sera jamais effacé plus. Je pense qu'un chien de garde serait plus approprié dans ce cas, au lieu d'écrire 1 sur l'onglet chargement, vous devez écrire timestamp actuel. Puis dans l'réduire une partie, vous devez faire valoir le délai depuis l'horodatage n'est pas trop grand ou remplacer par 0 si elle est. De cette façon, vous n'avez pas à compter sur l'appel deonbeforeunload
. L'onglet juste besoin de reset le chien de garde de temps en temps pour maintenir le local de stockage de l'existence.C'est une vieille question, mais il semble aucune des réponses ci-dessus sont parfaits.
Dans le cas où vous souhaitez stocker d'authentification ou de toute information à caractère sensible qui sont détruits uniquement lorsque le navigateur est fermé, vous pouvez compter sur
sessionStorage
etlocalStorage
pour la croisée de la transmission de message.En gros, l'idée est la suivante:
localStorage
etsessionStorage
sont vides (si pas, vous pouvez effacer lalocalStorage
). Vous devez inscrire un message d'écouteur d'événement sur lalocalStorage
.sessionStorage
pour stocker les informations sensibles, et d'utiliser lelocalStorage
pour stocker ces informations, puis de les supprimer (vous n'avez pas de soins sur le cadencement ici, puisque l'événement a été mis en file d'attente lors de la modification de données). Un autre onglet ouvert à ce moment-là sera appelé revenir sur le message de l'événement, et de mettre à jour leurssessionStorage
avec les informations sensibles.sessionStorage
sera vide. Le code devra définir une clé dans lelocalStorage
(par exemple:req
). Tout(tous) autre onglet sera rappelé dans le message d'événement, reportez-clés, et vous pouvez répondre avec les informations sensibles de leursessionStorage
(comme dans le 3), si elles en ont.Veuillez noter que ce régime ne dépend pas de
window.onbeforeunload
événement qui est fragile (depuis le navigateur peut être fermée/s'est écrasé sans ces événements de feu). En outre, le temps, les informations sensibles sont stockées sur lelocalStorage
est très faible (puisque vous comptez sur transcients de la détection de changement de la croix de l'onglet message d'événement), il est donc peu probable que de telles informations sensibles à des fuites sur le disque dur de l'utilisateur.Voici une démo de ce concept: http://jsfiddle.net/oypdwxz7/2/
vous pouvez essayer le code suivant pour supprimer le stockage local:
localStorage.removeItem(key);
pour supprimer une clé.delete
? J'ai essayé, et ça marche. Est-il des effets secondaires ou quoi que ce soit que nous ne devrions pas utiliser les supprimer? Je vous remercie.delete
n'est pas la meilleure pratique danslocalStorage