web-dev-qa-db-fra.com

Comment supprimer un élément localStorage lorsque la fenêtre/l'onglet du navigateur est fermé?

Mon cas: localStorage avec clé + valeur à supprimer lorsque le navigateur est fermé et non à onglet unique.

S'il vous plaît voir mon code si c'est correct 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;
});
javascriptjqueryhtml5local-storage
316
Yosef

devrait être fait comme ça et pas avec l'opérateur delete:

localStorage.removeItem(key);
666
Yosef

Vous pouvez utiliser l'événement beforeunload en JavaScript.

En utilisant JavaScript Vanilla, vous pouvez faire quelque chose comme:

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

Cela supprimera la clé avant la fermeture de la fenêtre/de l’onglet du navigateur et vous invitera à confirmer l’action Fermer la fenêtre/l’onglet. J'espère que cela résout votre problème.

Remarque: la méthode onbeforeunload doit renvoyer une chaîne.

90
MT.

Utiliser avec le mot clé global window: -

 window.localStorage.removeItem('keyName');
89
vineet

Vous devriez plutôt utiliser sessionStorage si vous souhaitez que la clé soit supprimée à la fermeture du navigateur.

82
Graou13

Essayez d'utiliser 

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

J'espère que cela fonctionne pour toi

17
Rafael Marques

Il existe un cas d'utilisation très spécifique dans lequel toute suggestion d'utiliser sessionStorage au lieu de localStorage n'aide pas vraiment… .. Le cas d'utilisation serait quelque chose d'aussi simple que d'avoir quelque chose de stocké alors que vous avez au moins un onglet ouvert, mais l'invalider si vous fermez le dernier onglet restant . Si vous souhaitez que vos valeurs soient enregistrées sous forme de tableau croisé et de fenêtre, sessionStorage ne vous aide pas, sauf si vous compliquez la vie de vos auditeurs, comme je l’ai déjà essayé . Ce serait parfait pour cela, mais cela ferait le travail «trop bien», car vos données y resteraient même après un redémarrage du navigateur .. J'ai fini par utiliser un code personnalisé et une logique qui tire parti des deux.

Je préférerais expliquer puis donner du code. Commencez par stocker ce dont vous avez besoin dans localStorage, puis dans LocalStorage également, créez un compteur qui contiendra le nombre d'onglets que vous avez ouverts . Ce nombre sera augmenté à chaque chargement de la page et diminué à chaque déchargement de la page. Vous pouvez choisir ici les événements à utiliser. Je vous suggérerais «charger» et «décharger»… .. Au moment du déchargement, vous devez effectuer les tâches de nettoyage que vous souhaitez effectuer lorsque le compteur atteint 0, ce qui signifie que vous fermez le dernier onglet . Voici la partie la plus délicate: je n'ai pas trouvé de moyen générique et fiable pour faire la différence entre un rechargement ou une navigation dans la page et la fermeture de l'onglet. Donc, si les données que vous stockez ne sont pas quelque chose que vous pouvez reconstruire au chargement après avoir vérifié qu'il s'agit du premier onglet, vous ne pouvez pas les supprimer à chaque actualisation . Vous devez au contraire stocker un indicateur dans sessionStorage à chaque fois. charge avant d'augmenter le compteur de tabulation . Avant de stocker cette valeur, vous pouvez vérifier si elle a déjà une valeur et si ce n'est pas le cas, cela signifie que vous chargez dans cette session pour la première fois. time, ce qui signifie que vous pouvez effectuer le nettoyage à la charge si cette valeur n’est pas définie et que le compteur est 0.

12
Solthun

utiliser sessionStorage

L'objet sessionStorage est égal à l'objet localStorage, à la différence qu'il ne stocke les données que pour une session. Les données sont supprimées lorsque l'utilisateur ferme la fenêtre du navigateur.

L'exemple suivant compte le nombre de fois où un utilisateur a cliqué sur un bouton dans la session en cours:

Exemple

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

Bien que certains utilisateurs aient déjà répondu à cette question, je donne un exemple de paramètres d’application pour résoudre ce problème.

J'ai eu le même problème. J'utilise https://github.com/grevory/angular-local-storage module dans mon application angularjs. Si vous configurez votre application comme suit, la variable sera enregistrée dans le stockage de session au lieu du stockage local. Par conséquent, si vous fermez le navigateur ou l'onglet, le stockage de session sera automatiquement supprimé. Vous n'avez pas besoin de faire quoi que ce soit. 

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

J'espère que ça va aider.

4
user1012513

pourquoi ne pas utiliser sessionStorage?

"L'objet sessionStorage est égal à l'objet localStorage, à la différence qu'il ne stocke les données que pour une session. Les données sont supprimées lorsque l'utilisateur ferme la fenêtre du navigateur." 

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

3
wjfinder77

Je ne pense pas que la solution présentée ici soit correcte à 100% car l'événement window.onbeforeunload est appelé non seulement lorsque le navigateur/l'onglet est fermé (WHICH IS REQUIRED), mais également sur tous les autres événements. (CE QUI NE PEUT PAS ÊTRE REQUIS)

Voir ce lien pour plus d’informations sur la liste des événements pouvant déclencher window.onbeforeunload: -

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

3
miztaken
        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]);
      }
3
Gil Snovsky

Voici un test simple pour voir si vous avez le support du navigateur lorsque vous travaillez avec un stockage local:

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

Cela a fonctionné pour moi comme prévu (j'utilise Google Chrome). Adapté de: http://www.w3schools.com/html/html5_webstorage.asp .

3
rdonatoiop

Après avoir examiné cette question six ans après l’avoir posée, j’ai trouvé qu’il n’existait toujours pas de réponse suffisante à cette question; qui devrait atteindre tous les objectifs suivants:

  • Effacer le stockage local après la fermeture du navigateur (ou de tous les onglets du domaine)
  • Préserver le stockage local entre les onglets, si au moins un onglet reste actif
  • Préserver le stockage local lors du rechargement d'un seul onglet

Exécutez cette partie de javascript au début de chaque chargement de page pour atteindre les objectifs ci-dessus:

((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: L'idée de base est la suivante:

  1. Lors du démarrage à partir de zéro, un identifiant aléatoire est attribué au stockage de session dans une clé appelée tabid
  2. Le stockage local est ensuite défini avec une clé appelée tabs contenant un objet. La clé tabid est définie sur 1.
  3. Lorsque l'onglet est déchargé, la variable tabs de la mémoire locale est mise à jour en un objet contenant la variable tabid définie sur 0. 
  4. Si l'onglet est rechargé, il est d'abord déchargé et repris. Étant donné que la clé de stockage de session tabid existe et la clé de stockage local tabs avec une sous-clé de tabid, le stockage local n'est pas effacé.
  5. Lorsque le navigateur est déchargé, tout le stockage de session sera effacé. Lors de la reprise de la session, la mémoire de stockage tabid n’existera plus et une nouvelle tabid sera générée. Étant donné que le stockage local n'a pas de sous-clé pour cette tabid, ni aucune autre tabid (toutes les sessions ont été fermées), elle est effacée.
  6. Sur un nouvel onglet créé, une nouvelle tabid est générée dans le stockage de session, mais comme il existe au moins une tabs [tabid], le stockage local n'est pas effacé.
2
Hacktisch

C'est une vieille question, mais il semble qu'aucune des réponses ci-dessus ne soit parfaite.

Dans le cas où vous souhaitez stocker une authentification ou des informations sensibles qui ne sont détruites que lorsque le navigateur est fermé, vous pouvez vous fier à sessionStorage et localStorage pour la transmission des messages de tableau croisé.

En gros, l’idée est:

  1. Vous démarrez à partir d'aucun des onglets précédents ouverts. Ainsi, vos localStorage et sessionStorage sont vides (sinon, vous pouvez effacer la localStorage). Vous devrez enregistrer un écouteur d'événement sur la variable localStorage.
  2. L'utilisateur authentifie/crée une information sensible sur cet onglet (ou tout autre onglet ouvert sur votre domaine).
  3. Vous mettez à jour la sessionStorage pour stocker les informations sensibles, et vous utilisez la localStorage pour stocker ces informations, puis vous les supprimez (vous ne vous souciez pas de la synchronisation ici, car l'événement a été mis en file d'attente lorsque les données ont été modifiées). Tout autre onglet ouvert à ce moment-là sera rappelé sur l'événement de message et mettra à jour sa sessionStorage avec les informations sensibles.
  4. Si l'utilisateur ouvre un nouvel onglet sur votre domaine, sa sessionStorage sera vide. Le code devra définir une clé dans la localStorage (par exemple: req). Tous les autres onglets seront rappelés dans l'événement de message, verront cette clé et pourront répondre avec les informations sensibles de leur sessionStorage (comme dans 3), s'ils en ont.

Veuillez noter que ce schéma ne dépend pas de l'événement window.onbeforeunload qui est fragile (puisque le navigateur peut être fermé/bloqué sans que ces événements ne soient déclenchés). De plus, la durée pendant laquelle les informations sensibles sont stockées dans la variable localStorage est très petite (étant donné que vous comptez sur la détection de changement de transcendant pour un événement de message croisé), il est donc peu probable que de telles informations sensibles fuient sur le disque dur de l'utilisateur.

Voici une démo de ce concept: http://jsfiddle.net/oypdwxz7/2/

0
xryl669