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

Question

Mon cas : localStorage avec clé + valeur qui doit être supprimé lorsque le navigateur est fermé et non pas un seul onglet.

Veuillez voir mon code s'il 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;
});

Answer 1

Devrait être fait de cette façon et non avec l'opérateur delete :

localStorage.removeItem(key);

Answer 2

Vous devez utiliser le sessionStorage à la place si vous voulez que la clé soit supprimée à la fermeture du navigateur.

Answer 3

Vous pouvez utiliser le beforeunload en JavaScript.

En utilisant du JavaScript classique, vous pourriez 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 de fermeture de la fenêtre/de l'onglet. J'espère que cela résoudra votre problème.

NOTE : Le onbeforeunload doit retourner une chaîne de caractères.

Answer 4

Essayez d'utiliser

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

J'espère que cela fonctionnera pour vous

Answer 5

Voici un test simple pour voir si votre navigateur prend en charge le 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 .